slider
滑动选择器。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| min | Number | 0 | 否 | 最小值 | |
| max | Number | 100 | 否 | 最大值 | |
| step | Number | 1 | 否 | 步长，取值必须大于 0，并且可被(max - min)整除 | |
| disabled | Boolean | false | 否 | 是否禁用 | |
| value | Number | 0 | 否 | 当前取值 | |
| color | Color | #888888 | 否 | 步长文字颜色 | |
| activeColor | Color | #00cac4 | 否 | 已选择的颜色 | |
| backgroundColor | Color | #e9e9e9 | 否 | 背景条的颜色 | |
| block-size | Number | 28 | 否 | 滑块的大小，取值范围为 12 - 28 | |
| block-color | Color | #ffffff | 否 | 滑块的颜色 | |
| show-value | Boolean | false | 否 | 是否显示当前 value | |
| bindchange | EventHandle | 否 | 完成一次拖动后触发的事件，event.detail = {value} | ||
| bindchanging | EventHandle | 否 | 拖动过程中触发的事件，event.detail = {value} |
示例代码：
<!--pages/component/pages/slider/slider.mcml-->
<view class="container">
<view class="statement">滑动选择器。</view>
<block mc:for="{{props}}">
<view class="cssname">{{item.name}}</view>
<view>
<slider style="color:red;"
min="{{item.min || 0}}"
max="{{item.max || 100}}"
step="{{item.step || 1}}"
disabled="{{item.disabled || false}}"
show-value="{{item.showValue || false}}"
value="{{item.value || 0}}"
color="{{item.color ? item.color : ''}}"
selected-color="{{item.selectedColor ? item.selectedColor : '' }}"
activeColor="{{item.activeColor ? item.activeColor : '' }}"
backgroundColor="{{item.backgroundColor ? item.backgroundColor : '' }}"
block-size="{{item.blockSize || 28}}"
block-color="{{item.blockColor || '#fff'}}"
bindchange="bindchange"
bindchanging="bindchanging"
></slider>
</view>
</block>
<view class="cssname">bindchange</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindchange}}</text>
<view class="cssname">bindchanging</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindchanging}}</text>
</view>
// pages/component/pages/slider/slider.js
Page({
data: {
props:[
{ name: 'min:10 , max: 200', value:30, min: 10, max: 200, showValue: true},
{ name: 'min:-200 , max: 10', value:-30, min: -200, max: 10, showValue: true},
{ name: 'step: 20', step: 20},
{ name: 'disabled', disabled: true, value: 60 },
{ name: 'show-value', showValue: true },
{ name: 'color', color: 'red', showValue: true, value: 40 },
{ name: 'activeColor', activeColor: 'red', value: 20 },
{ name: 'backgroundColor', backgroundColor: 'blue', value: 30 },
{ name: 'block-size', blockSize: 12 },
{ name: 'block-color', blockColor: 'green' }
]
},
bindchanging: function(e){
this.setData({
bindchanging: JSON.stringify(e.detail, 2, null)
})
},
bindchange: function (e) {
this.setData({
bindchange: JSON.stringify(e.detail, 2, null)
})
}
})