阅读(4133)
赞(10)
百度智能小程序 滑动选择器
2020-08-11 17:38:32 更新
slider 滑动选择器
解释：滑动选择器
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | |
|---|---|---|---|---|---|
|
min |
Number |
0 |
否 |
最小值 |
|
|
max |
Number |
100 |
否 |
最大值 |
|
|
step |
Number |
1 |
否 |
步长，取值必须大于 0，并且可被 (max - min) 整除 |
|
|
disabled |
Boolean |
false |
否 |
是否禁用 |
|
|
value |
Number |
0 |
否 |
当前取值 |
|
|
backgroundColor |
Color |
#cccccc |
否 |
背景条的颜色 |
|
|
block-size |
Number |
24 |
否 |
滑块的大小，取值范围为 12 - 28 |
|
|
block-color |
Color |
#ffffff |
否 |
滑块的颜色 |
|
|
activeColor |
Color |
#3c76ff |
否 |
已选择的颜色 |
|
|
show-value |
Boolean |
false |
否 |
是否显示当前 value |
|
|
bindchange |
EventHandle |
否 |
完成一次拖动后触发的事件，event.detail = {value: value} |
||
|
bindchanging |
EventHandle |
否 |
拖动过程中触发的事件，event.detail = {value: value} |
||
示例
代码示例 1 - 默认样式
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">默认样式</view>
<slider
class="slider"
min="0"
max="1500"
value="200"
step="30"
bind:change="sliderChange"
bind:changing="sliderChanging"
disabled="false">
</slider>
</view>
</view>Page({
sliderChange(e) {
console.log('sliderChange', e.detail);
},
sliderChanging(e) {
console.log('sliderChanging', e.detail);
}
});代码示例 2 - 显示当前取值
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
<view>显示当前取值</view>
<view>show-value</view>
</view>
<slider
class="slider"
min="0"
max="200"
value="30"
show-value
step="30"
bind:change="sliderChange"
disabled="false">
</slider>
</view>
</view>代码示例 3 - 自定义最大/最小值
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
<view>自定义最大/最小值</view>
<view>min="200" max="1500"</view>
</view>
<slider
class="slider"
min="200"
max="1500"
value="400"
show-value step="30"
bind:change="sliderChange"
disabled="false">
</slider>
</view>
</view>代码示例 4 - 自定义步长
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
<view>自定义步长</view>
<view>step="30"</view>
</view>
<slider
class="slider"
min="0"
max="1500"
value="200"
step="30"
bind:change="sliderChange"
disabled="false">
</slider>
</view>
</view>代码示例 5 - 自定义样式
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
<view>自定义样式</view>
<view>block-size="16" block-color="#3388FF"</view>
</view>
<slider
class="slider"
min="0"
max="1500"
value="200"
step="30"
block-size="16"
block-color="#3388FF"
activeColor="#3c76ff"
backgroundColor="#cccccc"
disabled="false">
</slider>
</view>
</view>