微信小程序 picker-从底部弹起的滚动选择器

效果图

官方文档链接

wxml

<view>普通选择器：请选择选项</view>
<!--
  mode默认值selector 普通选择器
  range数据源(mode 为 selector 或 multiSelector 时有效)
  value表示选择了数据源中的第几个值(下标从0开始)
  bindchange事件value改变时触发
-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="changeValue">
    <text>{{array[index]}}</text>
</picker>
 
<view>时间选择器：请选择时间</view>
<!-- 
  mode=time 时间选择器
  value 表示选中的时间 格式"hh:mm"
  start 有效时间范围的开始
  end 有效时间范围的结束
  bindchange事件value改变时触发
-->
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="changeTime">
    <text>{{time}}</text>
</picker>
 
<view>日期选择器：请选择日期</view>
<!-- 
  mode =date 日期选择器
  value 表示选中的日期 格式"YYYY-MM-DD"
  start 有效日期范围的开始
  end 有效日期范围的结束
  bindchange事件value改变时触发
 -->
<picker mode="date" value="{{date}}" start="2000-1-1" end="2050-1-1" bindchange="changeDate">
    <text>{{date}}</text>
</picker>

JS

Page({
  data: {
    //普通选择器数据
    array:['选项一', '选项二', '选项三'],
    //普通选择器值索引
    index: 0,
    //时间选择器默认值
    time: '9:30',
    //日期选择器默认值
    date: '2020-8-21'
  },
  //普通选择器值改变时触发
  changeValue(e) {
    this.setData({
      index: e.detail.value
    })
  },
  //时间选择器值改变时触发
  changeTime(e) {
    this.setData({
      time: e.detail.value
    })
  },
  //日期选择器值改变时触发
  changeDate(e) {
    date: e.detail.value
  }
})