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

最新推荐文章于 2025-06-20 18:35:35 发布

原创最新推荐文章于 2025-06-20 18:35:35 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序同时被 2 个专栏收录

10 篇文章

订阅专栏

经验分享

9 篇文章

订阅专栏

这篇博客介绍了如何利用 vantWeapp 的 Slider 组件在微信小程序中实现一个滑动计数器。当圆形按钮被拖动到尽头时，计数器加一并显示提示，否则返回起点。代码包括 json 配置、wxml 结构、wxss 样式和 js 逻辑，适合对 vantWeapp 不熟悉的同学学习。同时，该实现允许扩展 vantWeapp Slider 的其他属性以适应不同业务需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开门见山地说，直接上效果：
在这里插入图片描述

效果图就如上图所示，拖动圆形按钮到尽头后，会提示计数加一，然后圆形按钮自动回到起点，如果没有拖动到尽头，则圆形按钮直接回到起点，不提示计数加一。由于代码实现是基于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，框架中的扩展属性也是能够使用的，这样可以迎合各种业务场景，希望能够帮到大家！