微信小程序+vant Weapp Slider 滑块实现滑动拖动计数器

 开门见山地说，直接上效果：



 效果图就如上图所示，拖动圆形按钮到尽头后，会提示计数加一，然后圆形按钮自动回到起点，如果没有拖动到尽头，则圆形按钮直接回到起点，不提示计数加一。由于代码实现是基于vant Weapp框架实现的，所以建议对vant Weapp不熟悉的同学先了解一下如何使用，官方文档：vant-weapp: 轻量、可靠的小程序 UI 组件库。
 接下来是实现代码，json：

"usingComponents": {
    "van-slider": "@vant/weapp/slider/index"
  },

 wxml:

<van-slider value="{{ currentValue }}" bind:change="onDragChange" bar-height="20px" active-color="#D4E9FF" custom-class="slider-style">
 </van-slider>

 wxss:

.slider-style {
  margin: 10px;
  margin-left: 20px;
  margin-right: 16px;
}

 js:

data: {
    currentValue : 0
  },
  
// 滑动计数器处理逻辑
  onDragChange() {
    var that = this
    if (that.data.currentValue == 100) {
       wx.showToast({
          title: '计数加一',
          icon: 'success',
          duration: 1500
        })
      setTimeout(function () {
        that.data.currentValue = 0
      }, 500)
    } else if (that.data.currentValue != 0) {
      setTimeout(function () {
        that.data.currentValue = 0
      }, 200)
    }
  },

 以上代码就是微信小程序结合vant Weapp Slider 滑块实现滑动拖动计数器的实现代码，效果图建议大家复制出来看下，本来想发视频的，但一直没审核通过，最终直接贴效果图了。此外，因为是使用了vant Weapp 框架的Slider，框架中的扩展属性也是能够使用的，这样可以迎合各种业务场景，希望能够帮到大家！