ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-10-06 19:34:01  阅读:177  来源: 互联网

标签:fs 字体大小 拖动 程序 value 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,真的好用吗?感觉一点也不香啊。

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

标签:fs,字体大小,拖动,程序,value,slider,文档,设置,选择器
来源: https://blog.csdn.net/wechat_wuming/article/details/120628067

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有