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

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

查询官方文档并设置属性

1. 先百度搜索查看picker滚动选择器组件的官方文档，通过设置其mode属性的值可使用不同的滚动选择器，不同的选择器除了公共属性外，还会有一些特殊属性。本篇经验分享时间选择器的相关内容（即mode'time'）。

在wxml文件中创建选择器

2. 在wxml文件中，通过picker标签创建一个多列选择器，相关操作如下：

1. 设置mode属性的值为'time'，即时间选择器；
2. 使用动态绑定的方式设置选择器的value属性，即当前值；
3. start和end属性设置选择器可选择的时间范围；
4. bindchange属性可绑定选择器改变后的回调函数。

在js文件中定义变量和回调函数

3. 在js文件中定义上面数据绑定所使用的变量，以及bindchange属性绑定的回调函数。

在wxss文件中定义样式

4. 在wxss文件中声明wxml中组件所使用的类的样式定义。

查看效果和触发回调函数

5. 保存编译后，在模拟器中查看页面效果，符合预期。点击选择器，弹出滚动选择区域，当超出设置的时间范围后，会自动回弹；确认选择一个时间后，会触发bindchange绑定的回调函数。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。