微信小程序 指示条跟随滑动

微信小程序版本 

　　使用 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

    })

  }