### [关于微信小程序slider的介绍](https://www.prosaas.cn/article/17289)

**Published:** 2018-06-27T06:21:07

**Author:** 5201314

**Excerpt:** 这篇文章主要介绍了微信小程序 slider 详解及实例代码的相关资料,需要的朋友可以参考下实现效果图：滑动选择…

这篇文章主要介绍了微信小程序 slider 详解及实例代码的相关资料,需要的朋友可以参考下

实现效果图：

![](https://img.php.cn/upload/article/000/000/009/613cae91b4a7c3fc1e170f22eb5a4d36-0.png)

滑动选择器

| 属性名 | 类型  | 默认值 | 说明  |
| --- | --- | --- | --- |
| min | Number | 0   | 最小值 |
| max | Number | 100 | 最大值 |
| step | Number | 1   | 步长，取值必须大于 0，并且可被 (max - min) 整除 |
| disabled | Boolean | false | 是否禁用 |
| value | Number | 0   | 当前取值 |
| show-value | Boolean | false | 是否显示当前value |
| bindchange | EventHandle |     | 完成一次拖动后触发的事件，event.detail = {value:value} |

**示例代码：**

<view class="section section\_gap">
 <text class="section\_\_title">设置left/right icon</text>
 <view class="body-view">
 <slider bindchange="slider1change" left-icon="cancel" right-icon="success\_no\_circle"/>
 </view>
</view>

<view class="section section\_gap">
 <text class="section\_\_title">设置step</text>
 <view class="body-view">
 <slider bindchange="slider2change" step="5"/>
 </view>
</view>

<view class="section section\_gap">
 <text class="section\_\_title">显示当前value</text>
 <view class="body-view">
 <slider bindchange="slider3change" show-value/>
 </view>
</view>

<view class="section section\_gap">
 <text class="section\_\_title">设置最小/最大值</text>
 <view class="body-view">
 <slider bindchange="slider4change" min="50" max="200" show-value/>
 </view>
</view>

var pageData = {}
for(var i = 1; i < 5; ++i) {
 (function (index) {
 pageData\[\`slider${index}change\`\] = function(e) {
 console.log(\`slider${index}发生change事件，携带值为\`, e.detail.value)
 }
 })(i);
}
Page(pageData)

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于微信小程序实现顶部选项卡(swiper)的介绍

微信小程序实现YDUI中ScrollTab组件

微信小程序progress组件的使用介绍

以上就是关于微信小程序slider的介绍的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---