重要参数
min 最小值,默认值为0
max 最大值,默认值为100
step 步长,必须大于1,且可以被max - min整除
value 设置当前的值
backgroundColor 整个进度条的颜色
activeColor 已选择的颜色
block-color 滑块的颜色
block-size 滑块的大小,最小12,最大28,默认28
show-value 显示当前值
bindchange 绑定一次改变事件,拖动结束后触发
bindchanging 绑定改变事件,一边拖动一边触发
注意:bindchange和bindchanging事件的获取值的方式,仍然是e.detail.value,如果你看过我之前的文档的话,应该对其不太陌生。
分析
滑动选择器的功能是通过拖动,改变数值,比如说我们经常在调整音量或者调整亮度的时候,可以遇到类似的东西。但是放到小程序中,感觉效果不理想,也不是很好用。
为什么这样说呢?在小程序中,有什么数字是需要通过滑动设置的呢?比如说,设置字体大小?嗯,是个好办法!那,还有什么能用这个的呢?总之,感觉能发挥用处的时候太少了。
简单使用:设置字体大小
wxml的代码如下
<slider min="32" max="120" step="2" backgroundColor="black" activeColor="red" block-color="yellow" block-size="16" show-value bindchange="slider_change"></slider>
<view style="font-size:{{ fs }}rpx;">
这是一段可以控制大小的文本,神奇吧?
</view>
js的代码如下
Page({
data: {
fs: 32
},
onl oad: function (options) {
},
slider_change(e){
this.setData({"fs": e.detail.value});
}
})
以上代码的功能是,我们允许用户从32rpx一直设置到120rpx。当然,直接显示32的数字,对于不了解程序的用户来说,可能会让其感到比较困扰。你也可以优化一下,改为字体大小从1开始增加,这样可能会更好一些。
使用效果如下
emmmmmm,真的好用吗?感觉一点也不香啊。