微信小程序表单类组件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滑动选择器使用详解

Windows11如何通过开始程序按钮打开事件查看器 《apex》一个赛季持续多久 如何彻底删除电脑上的文件包? 如何使用SQL Developer进行数据库表移动 NIKKE胜利女神第三章遗失物收集全攻略
热门搜索
图片制作工具 蛋壳画图片 消防标志图片大全 我的梦想手抄报图片 潘多拉电影