【快速文档】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标签,在小程序中插入一个滑动选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具