picker（选择器）组件可以很方便地在移动端选择地区、时间和其他自定义选项
当单击选择器时，会从底部弹起滚动选择器

微信小程序的选择器组件支持

  • 普通选择器
  • 多列选择器
  • 时间选择器
  • 日期选择器
  • 省市区选择器

5种类型，默认为普通选择器

选择器通过mode属性类区分

不同的选择器有不同的属性
表3.17～表3.21是5种选择器的属性

普通选择器的属性

当mode = selector时是普通选择器，普通选择器的属性

image.png多列选择器的属性

当mode = multiSelector时是多列选择器，多列选择器的属性

image.png时间选择器的属性

当mode = time时是时间选择器，时间选择器的属性
image.png

日期选择器的属性

当mode = date时是日期选择器，日期选择器的属性
image.png

省市区选择器的属性

当mode = region时是省市区选择器，省市区选择器的属性
image.png

如何使用picker组件

  1. index.wxml
  2. ------------------
  3. <view >
  4.   <view >时间选择器</view>
  5.   <picker
  6.     mode="time"
  7.     value="{{time}}"
  8.     start="09:01"
  9.     end="21:01"
  10.     bindchange="bindTimeChange"
  11.   >
  12.     <view>当前选择: {{time}}</view>
  13.   </picker>
  14. </view>
  15. --------------------------------------------------------------
  16. index.js
  17. -----------------
  18. Page({
  19.   data: {
  20.     time: '12:21'
  21.   },
  22.   bindTimeChange(e) {
  23.     console.log('picker发送选择改变，携带值为', e.detail.value)
  24.     this.setData({
  25.       time: e.detail.value
  26.     })
  27.   }
  28. })

在示例3-21中设置了picker的时间取值范围为09:01～21:01
如果选择时间小于09:01，结果会是09:01
同样，如果选择时间大于21:01，最后的结果最大也只能是21:01
效果如图3.22所示
image.png