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

 时间:2024-11-18 13:50:25

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

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

2、在 wxml 文件中,通过 <picker> 标签创建一个多列选择器,相关操作如下:1. 设置 mode 属性的值为 'time' 即时间选择器;2. 使用动态绑定的方式设置选择器的 value 属性,即当前值;3. start 和 end 属性设置选择器可选择的时间范围;4. bindchange 属性可绑定选择器改变后的回调函数。

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

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

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

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

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

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

微信小程序表单类组件picker时间选择器使用详解
  • word1013从任意页起奇偶页页码格式不同的方法
  • 怎样把word设为默认打开方式
  • 使用word样式后,如何取消前面的小黑点?
  • 如何在word中查找引用所在位置
  • 如何在matlab中查看avi视频的信息
  • 热门搜索
    韩国三级电影大全 家常香辣蟹 古老肉的家常做法 耳机进水了怎么办 蚕豆怎么做好吃 etc换电池方法图解 胃下垂的治疗方法 解梦大全查询自已梦见 puk码解锁方法 爱奇艺视频怎么下载