【微信小程序】slider滑动选择器(82/100）

UI布局：

<!--pages/slider/slider.wxml-->
<text class="page__title">slider</text>
<text class="page__desc">滑块</text>

<text class="section__title">设置left/right icon</text>
<view class="body-view">
  <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle" />
</view>

<text class="section__title">设置step</text>
<view class="body-view">
  <slider bindchange="slider2change" step="5" />
</view>

<text class="section__title">显示当前value</text>
<view class="body-view">
  <slider bindchange="slider3change" show-value />
</view>

<text class="section__title">设置最小/最大值</text>
            <view class="body-view">
                <slider bindchange="slider4change" min="50" max="200" show-value/>
            </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

功能描述
滑动选择器。

属性说明
属性 类型 默认值 必填 说明 最低版本
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