模拟淘宝/支付宝——实现tab栏左右拖动，进度条同步滑动距离-蒲公英云

模拟淘宝/支付宝——实现tab栏左右拖动，进度条同步滑动距离

小咪咪 2023-06-25 14:28 67阅读 0赞

html

开始

开始

开始

开始

开始

开始

开始

        <div class="boxtab1">
            <i ref="littleBar"></i>
        </div>

css

.boxtab1{

margin-top: 20px;
width: 40px;
height: 5px;
background: \#cccccc;
position: relative;
border-radius: 5px

}

.boxtab1 i{

border-radius: 5px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 5px;
display: inline-block;
background:red;

}

.boxtab{

width: 300px;
height: 30px;
overflow: hidden;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling:touch;
background:red

}

.boxtab span{

padding: 4px 8px;
margin: 0 4px

}

// 导航栏滑动
slide () {
let that = this
let left = this.$refs.navTabItems.scrollLeft
// 导航栏向左滑动的距离
that.scrollLeft = left
console.log(‘导航栏向左滑动了’, left)
// 导航栏可滚动的距离
let navWidth = this.$refs.navTabItems.scrollWidth - this.$refs.navTabItems.offsetWidth
// 进度条可滚动的距离
let barWidth = this.$refs.littleBar.scrollWidth
console.log(‘navWidth’, navWidth, ‘barWidth’, barWidth)

              // 获取进度条向左滑动的距离mobileBarLeft  = 进度条宽度barWidth / 导航栏宽度navWidth \* 导航栏向左移动的距离                    that.scrollLeft  
              let mobileBarLeft = barWidth / navWidth \* that.scrollLeft  
              this.$refs.littleBar.style.left = mobileBarLeft + 'px'  
              let barLeft = this.$refs.littleBar.style.left  
              console.log('进度条向左移动了', barLeft)  
\},