微信小程序 指示條跟隨滑動

微信小程序版本 

　　使用 scroll-view  使用函數

　　

wxml
<view class="special">
    <scroll-view scroll-x="true" bindscroll="bindscroll">
        <view class="option flex">
            <block wx:for="{{lista}}">
                <view class="box">
                    <image></image>
                    <view>{{item.name}}</view>
                </view>
            </block>
        </view>
    </scroll-view>
    <view class="scrollbat">
        <view class="present" style="left:{{around}}%"></view>
    </view>
</view>

js
　　data{

    around:0,

｝

  bindscroll(e){

　　獲取 滾動得距離

　　e.detail.scrollLeft  

　　獲取可滾動的總距離 總長度 - 顯示長度

   let p = e.detail.scrollWidth - 375

　　滾動得距離 / 可滾動的總距離

    let per = Math.round((滾動條總長度 - 拖動條) * percen)

    this.setData({

      around:per

    })

    this.setData({

      around:per

    })

  }