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

2021/10/6 20:11:14

本文主要是介绍【快速文档】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
  },
  onl oad: function (options) {
    
  },
  slider_change(e){
    this.setData({"fs": e.detail.value});
  }
})

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

使用效果如下

 emmmmmm,真的好用吗?感觉一点也不香啊。

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



这篇关于【快速文档】slider标签,在小程序中插入一个滑动选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程