养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

微信小程序表单类组件silder滑动选择器使用详解

时间:2024-10-29 02:31:42

本篇经验将继续分享表单类组件中slider滑动选择器组件的使用详解。经验基于第一个手工构建的微信小程序演示,具体构建步骤,可参考如下经验引用。

微信小程序表单类组件silder滑动选择器使用详解

工具/原料

微信开发者工具

方法/步骤

1、先百度搜索查看slider滑动选择器组件的官方评鲦易纪文档,其属性较多,比较常用的有step(每次滑动的步长),show-value(显示值)荑樊综鲶,min(最小值,默认为0),max(最大值,默认100)。

微信小程序表单类组件silder滑动选择器使用详解

2、在wxml中通过<slider>标签创建3个滑动选择器,分谧摅嵝羟别如下配置:1.配置属性step贞惕锂镫滑动步长为20,即每次滑动会以20为单位进行;2.配置属性show-value,即滑动选择器在右侧显示当前的值;3.配置属性min和max,即滑动选择器的最小和最大值。

微信小程序表单类组件silder滑动选择器使用详解

3、在js文件中定义上述3个滑动选择器绑定的change事件回调函数。

微信小程序表单类组件silder滑动选择器使用详解

4、保存编译后,在模拟器中查看显示效果,符合预期。

微信小程序表单类组件silder滑动选择器使用详解

5、滑动选择器后,在调试器中查看其绑定的事件回调函数被触发执行。

微信小程序表单类组件silder滑动选择器使用详解

© 一点知识