微信小程序表单类组件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视频的信息
  • 热门搜索
    什么减肥药效果最好 什么牌子沐浴露好 沉浸的意思 双是什么意思 牛萌萌经历了什么 campus是什么意思 sugar是什么意思 滚床单是什么意思 本命年有什么说法 紫砂杯适合泡什么茶