以下将展示微信小程序之表单组件slider源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
滑动选择器。
属性说明：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| min | number | 0 | 否 | 最小值 | 1.0.0 |
| max | number | 100 | 否 | 最大值 | 1.0.0 |
| step | number | 1 | 否 | 步长，取值必须大于 0，并且可被(max - min)整除 | 1.0.0 |
| disabled | boolean | FALSE | 否 | 是否禁用 | 1.0.0 |
| value | number | 0 | 否 | 当前取值 | 1.0.0 |
| color | color | #e9e9e9 | 否 | 背景条的颜色（请使用 backgroundColor） | 1.0.0 |
| selected-color | color | #1aad19 | 否 | 已选择的颜色（请使用 activeColor） | 1.0.0 |
| activeColor | color | #1aad19 | 否 | 已选择的颜色 | 1.0.0 |
| backgroundColor | color | #e9e9e9 | 否 | 背景条的颜色 | 1.0.0 |
| block-size | number | 28 | 否 | 滑块的大小，取值范围为 12 - 28 | 1.9.0 |
| block-color | color | #ffffff | 否 | 滑块的颜色 | 1.9.0 |
| show-value | boolean | FALSE | 否 | 是否显示当前 value | 1.0.0 |
| bindchange | eventhandle | 否 | 完成一次拖动后触发的事件，event.detail = {value} | 1.0.0 | |
| bindchanging | eventhandle | 否 | 拖动过程中触发的事件，event.detail = {value} | 1.7.0 |
示例代码
JAVASCRIPT：
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)WXML：
<view class="page">
<view class="page__hd">
<text class="page__title">slider</text>
<text class="page__desc">滑块</text>
</view>
<view class="page__bd">
<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>
</view>
</view>
版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
本文含有隐藏内容，请 开通VIP 后查看