微信小程序：选择器标签摘要

一、对话框选择器<picker>标签：

属性说明：

header-text：选择器标题(限Android)
mode：选择器类型，值：selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市区选择器)    
disabled：是否禁用
range(限mode=selector/multiSelector)：选择器可选列表
range-key：选择器当前选择的key
value：选择器当前选择的value，多列时是数组
start(限mode=time/date)：开始时间，格式：hh:mm、YYYY-MM-DD
end(限mode=time/date)：结束时间，格式：hh:mm、YYYY-MM-DD
fields(限mode=date)：date选择器的粒度，值：year(年)、month(月)、day(天)
custom-item(限mode=region)：每列顶部自定义的项
level：province(省选择器)、city(市选择器)、region(区选择器)、sub-district(街道选择器)
bindcancel：取消选择时触发的方法
bindchange：选择器value改变时触发的方法，通过event.detail.value获值
bindcolumnchange：列改变时触发的方法(限mode=multiSelecto)

1.普通选择器：

(1).wxml中显示选择器：

<picker mode="selector" bindchange="onPickerChange" value="{{selectorData[0]}}" range="{{selectorData}}">
  点击弹出普通选择器
picker>

(2).js中监听选择事件：

Page({
  data: {
    selectorData: ['0行', '1行', '2行'],  //普通选择器数据
  },
  onPickerChange(e){ //选择器值改变时触发
    console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
  }
})

2.多列选择器：

(1).wxml中显示选择器：

<picker mode="multiSelector" bindchange="onPickerChange" bindcolumnchange="onMultiPickerChange" value="{{multiSelectorData[0]}}" range="{{multiSelectorData}}">
  点击弹出多列选择器
picker>

(2).js中监听选择事件：

Page({
  data: {
    multiSelectorData: [['0列0行', '0列1行'], ['1列0行', '1列1行']], //多列选择器数据
  },
  onMultiPickerChange(e){ //多列选择器滚动时触发
    console.log('onMultiPickerChange 当前列column: ', e.detail.column, '  当前行value: ', e.detail.value);
  },
  ...
})

3.时间选择器：

(1).wxml中显示选择器：

<picker mode="time" bindchange="onPickerChange" value="{{timeSelectorData}}" start="00:00" end="23:59">
  点击弹出时间选择器
picker>

(2).js中监听选择事件：

Page({
  data: {
    timeSelectorData: '08:30',  //时间选择器数据
  },
  onPickerChange(e){ //选择器值改变时触发
    console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
  }
})

4.日期选择器：

(1).wxml中显示选择器：

<picker mode="date" bindchange="onPickerChange" value="{{dateSelectorData}}" start="1977-01-01" end="2022-11-30">
  点击弹出日期选择器
picker>

(2).js中监听选择事件：

Page({
  data: {
    dateSelectorData: '2020-04-08',  //时间选择器数据
  },
  onPickerChange(e){ //选择器值改变时触发
    console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
  }
})

5.省市区选择器：

(1).wxml中显示选择器：

<picker mode="region" bindchange="onPickerChange" value="{{adressSelectorData}}">
  点击弹出省市区选择器
picker>

(2).js中监听选择事件：

Page({
  data: {
    adressSelectorData: ['北京市', '北京市', '海淀区'], //省市区选择器数据
  },
  onPickerChange(e){ //选择器值改变时触发
    console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
  }
})

二、页面选择器标签：

属性说明：

value：当前列当前行选择的索引值
indicator-style：选择器选中框样式代码
indicator-class：选择器选中框样式类
mask-class：蒙层样式类
immediate-change：是否在手指松开时立即触发change事件
bindchange：选择器value改变时触发的方法，通过event.detail.value获值(当前列当前行索引，例[0, 0, 0])
bindpickstart：选择器开始滚动时触发
bindpickend：选择器结束滚动时触发

1. .wxml中显示选择器：

<picker-view class="picker_view_class" indicator-style="height: 50px;" value="{{[2022, 11, 30]}}" bindchange="onPpickerViewChange">
  <picker-view-column>
    <view wx:for="{{yearData}}" wx:key="{{yearData}}" class="picker_view_item_class">{{item}}年view>
  picker-view-column>
  <picker-view-column>
    <view wx:for="{{monthData}}" wx:key="{{monthData}}" class="picker_view_item_class">{{item}}月view>
  picker-view-column>
  <picker-view-column>
    <view wx:for="{{dayData}}" wx:key="{{dayData}}" class="picker_view_item_class">{{item}}日view>
  picker-view-column>
picker-view>

2. .js中初始化数据与监听选择事件：

const yearData = [] //年数据列表
const monthData = [] //月数据列表
const dayData = []  //日数据列表
var maxYear = new Date().getFullYear()
for (var i = 1977; i <= maxYear; i++) { //初始化年数据列表
  yearData.push(i)
}
for (var i = 1; i <= 12; i++) { //初始化月数据列表
  monthData.push(i)
}
for (var i = 1; i <= 30; i++) { //初始化日数据列表，此处没处理28或31天的情况
  dayData.push(i)
}
...
Page({
  data: {
    yearData:  yearData,  //年数据
    monthData:  monthData,  //月数据
    dayData:  dayData,  //日数据
  },
  onPickerViewChange(e){ //选择器滚动事件
    console.log('onPpickerViewChange 当前value: ', e.detail.value);
  }
})

3. .wxss中定义选择器样式：

.picker_view_class {
  width: 100%; 
  height: 300px;
}
.picker_view_item_class {
  line-height: 50px; 
  text-align: center;
}