模擬淘寶/支付寶——實現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)
    },