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

html

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

                <span>开始</span>

                <span>开始</span>

                <span>开始</span>

                <span>开始</span>

                <span>开始</span>

                <span>开始</span>

                <span>开始</span>

</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)
    },