微信小程序——滑动条

一、微信自带的进度条——slider组件

<slider bindchanging="sliderChanging" show-value>

当slider组件被拖动时，会执行silderChanging事件处理函数,通过不断打印函数的e.detail.value，可以看出函数执行时输出的信息。

sliderChanging:function(e){
    console.log(e.detail.value)
  }

所以，我们可以将音乐、视频、下载文件的进度转化为上面的进度条，用一定的公式进行转换，随着进度的进行，不断实时改变slider的位置实现同步。

二、Vant Weapp上面的Slider滑块组件

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
  <view class="custom-button" slot="button">
    {{ currentValue }}/100
  </view>
</van-slider>

.custom-button{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40rpx;
  width: 120rpx;
  background-color: red;
  border-radius: 40rpx;
  color: #fff;
}

Page({
  data: {
    currentValue: 20,
  },

  onDrag(event) {
    this.setData({
      currentValue: event.detail.value,
    });
  },
})