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

微信小程序表单类组件picker普通选择器使用详解

时间:2024-10-22 20:33:14

本篇经验将继续分享表单类组竭惮蚕斗件中picker滚动选择器之普通选择器组件的使用详解。经验基于第一个手工构建的微傻疑煜阖信小程序演示,具体构建步骤,可参考如下经验引用。注意:picker组件根据mode属性的值可以分为普通选择器,多列选择器,时间选择器,日期选择器以及省市区选择器。

微信小程序表单类组件picker普通选择器使用详解

工具/原料

微信开发者工具

方法/步骤

1、先百度搜索查看picker滚动选择器组件的官方文档,通过设置其mode属性的值可使用不同的滚动选择器,不同的选择器除了公共属性外,还会有一些特殊熟悉。本篇经验分享普通选择器的相关内容(即mode='selector')。

微信小程序表单类组件picker普通选择器使用详解

2、在wxml文件中,通过<picker>标签创建一个普通选择器,酋篚靶高需注意如下:1.不设置mode属性的值,默鹚剖蛲蛋认为'selector'即普通选择器;2.使用动态绑定的方式绑定选择器的range属性和value属性值,前者表示选择器的所有可选项,后者表示默认选择的项目;3.在标签内部通过视图容器组件view来显示当前选择器选择的条目内容。关于属性的动态绑定,可以参考如下引用经验。

微信小程序表单类组件picker普通选择器使用详解

3、在js文件中定义上述wxml动态绑定中所使用变量的初始值,以及所绑定的选择器改变后的事件回调函数。

微信小程序表单类组件picker普通选择器使用详解

4、在wxss文件中声明wxml文件中所使用的类对应的样式定义。

微信小程序表单类组件picker普通选择器使用详解

5、保存编译后,在模拟器中查看页面显示效果,符合预期,点击选择器,可以选择其他选项,并触发绑定的事件回调函数。

微信小程序表单类组件picker普通选择器使用详解

© 一点知识