微信小程序scroll-view滚动条的设置

关于scroll-view滚动条，由于不能够设置滚动条的样式，导致一些需求无法实现，比如这个效果

下方的滑块会随着滚动而按照比列进行滑动，这种效果使用默认应该是做不出来的，所以需要自己设置一个提示性滑块

首先使用微信小程序的scroll-view容器，并设置横向滚动，代码如下

<scroll-view scroll-x="true" bindscroll="ScrollChange" show-scrollbar="{{false}}" enhanced="{{true}}">
  <view class="swiper-wrap">
    <view class="swiper-item" wx:for="{{SecondList}}" wx:key="item" bind:tap="goClassify" data-item="{{item}}">
      <view style="width:80rpx;height:80rpx;overflow: hidden;border-radius:41%;">
        <image src="/static/img/apple2.png" mode="aspectFit" style="width:100%;height:100%;" />
      </view>
   <view class="swiper-name">{{item.name}}</view>
    </view>
  </view>
</scroll-view>

代码中设置show-scrollbar="{{false}}" enhanced="{{true}}"为了取消scroll-view的默认滚动条，scroll-x="true"设置为横向滚动

然后在wxml中写出一个提示滑块

<view class="slider-bottom">
       <view class="slider-content" animation="{{animationData}}"></view>
</view>

先讲一下我的思路：当滚动scroll-view时，下方的滑块也要按照比例去滚动，所以我们可以先拿到滚动容器.swiper-wrap的宽度，以及滑块容器的宽度

其次当滚动时通过scroll-view的事件bindscroll=“ScrollChange”，可以得到一些数据即(scrollLeft)

创建一些变量

page({
    data:{
        sliderWidth:'',//滑块容器的宽度
        scrollWidth:'',//滚动容器的宽度
        bili:''//计算得出的比例
    }
})

let scrollLeft = e.detail.scrollLeft ---滚动距离

let sliderWidth = this.data.sliderWidth---滑块容器的宽度

let scrollWidth = this.data.scrollWidth---滚动容器的宽度

通过计算比例即 滚动距离/滚动容器宽度 = 滑块滚动距离(x)/滑块容器的宽度，可得出x = 滑块容器宽度*滚动距离/滚动容器的宽度，在给滑块添加一个x轴方向的移动(这里我直接添加了动画)即可，代码如下

 ScrollChange(e){
    let scrollLeft = e.detail.scrollLeft
    let sliderWidth = this.data.sliderWidth
    let scrollWidth = this.data.scrollWidth
     this.setData({
       bili:scrollLeft/scrollWidth
     })
     let x = this.data.bili*sliderWidth
     let animationData1 = wx.createAnimation({
       duration:100,
       delay:0
     })
     animationData1.translateX(x-1).step()//此处的x-1可根据自己的需求进行修改，可能会有一些偏差，所以说有一些瑕疵，但是问题不大。
      this.setData({
        animationData:animationData1
      })
  },

然后滑块容器的宽度和滚动容器的宽度都是根据节点信息查询得来的，具体代码如下

onShow(){   
    wx.createSelectorQuery().select('.swiper-wrap').boundingClientRect(res=>{
      wx.createSelectorQuery().select('.slider-bottom').boundingClientRect(res2=>{
        wx.createSelectorQuery().select('.slider-content').boundingClientRect(res3=>{   
          this.setData({
             scrollWidth:res.width,
             sliderWidth:res2.width
          })
        }).exec()
      }).exec()
    }).exec()
}

最后把动画绑定到滑块上就ok了，代码如下：

 <view class="slider-content" animation="{{animationData}}"></view>

最后看一下做的效果吧

微信小程序的滚动滑块提示

微信小程序scroll-view滚动条的设置