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

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

![20191229171714336.png][]

**html**

<div class="boxtab" ref="navTabItems" @touchmove="slide">

</div>

<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

**js**

// 导航栏滑动  
    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)  
    \},

[20191229171714336.png]: https://img-blog.csdnimg.cn/20191229171714336.png