微信小程序——滑动条

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

微信小程序——滑动条_第1张图片

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

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

微信小程序——滑动条_第2张图片

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

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

微信小程序——滑动条_第3张图片

微信小程序——滑动条_第4张图片


  
    {{ currentValue }}/100
  
.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,
    });
  },
})

你可能感兴趣的:(前端学习,小程序,微信)