【快速文档】slider标签，在小程序中插入一个滑动选择器

重要参数

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
  },
  onLoad: function (options) {
    
  },
  slider_change(e){
    this.setData({"fs": e.detail.value});
  }
})

以上代码的功能是，我们允许用户从32rpx一直设置到120rpx。当然，直接显示32的数字，对于不了解程序的用户来说，可能会让其感到比较困扰。你也可以优化一下，改为字体大小从1开始增加，这样可能会更好一些。

使用效果如下

 emmmmmm，真的好用吗？感觉一点也不香啊。

回到小程序快速文档-吴茗