【快速文档】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-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享