在为发现小程序官方提供了picker后，毅然决然得放弃了摆弄了一天的纯js选择器，因为我发现在手写的选择器下，文本框的
placeholder 属性的显示层数超过我设置的模态，而文本域则直接是最高级的显示层，如果你的选择器在文本域上将直接点击到文本域，
无法选择。这时我发现了picker。。。
picker官方也给了五种选择器，通过mode区分，分别为普通选择器，多列选择器-multiSelector，时间选择器-time，日期选择器-date，省市区选择器-region，默认是普通选择器。
上代码 //wxml 普通选择器
<
picker
bindchange=
"bindPickerChange"
value=
"{{index}}"
range=
"{{array}}">
<
span
name=
"user_level"
id=
"user_level"
>
{{array[index]}}
</
span
>
</
picker
>
//js
data:{
array:[
"A",
"B",
"C",
"D",
"E", ],
objectArray: [
{
id:
0,
name:
'A'
},
{
id:
1,
name:
'B'
},
{
id:
2,
name:
'C'
},
{
id:
3,
name:
'D'
},
{
id:
4,
name:
'E'
}
],
index:
0,
}
bindPickerChange:
function (e) {
this.setData({
multiIndex2: e.detail.value
})
},
//html
<
picker
style=
"width:200px"
mode=
"multiSelector"
bindchange=
"bindMultiPickerChange2"
bindcolumnchange=
"bindMultiPickerColumnChange2"
value=
"{{multiIndex}}"
range=
"{{objectMultiArray}}"
range-key=
"{{'name'}}">
<
span
name=
"user_time"
style=
"margin-left:30%;border-bottom:1px solid #e3e3e3;width:160rpx">
{{objectMultiArray[0][multiIndex2[0]].name}}-{{objectMultiArray[1][multiIndex2[1]].name}}
</
span
>
</
picker
>
//js
data:{
objectMultiArray: [
[
{
id:
0,
name:
'不限'
},
{
id:
1,
name:
'周日'
},
{
id:
0,
name:
'周一'
},
{
id:
1,
name:
'周二'
},
{
id:
2,
name:
'周三'
},
{
id:
3,
name:
'周四'
},
{
id:
3,
name:
'周五'
},
{
id:
3,
name:
'周六'
}
], [
{
id:
0,
name:
'不限'
},
{
id:
1,
name:
'早上'
},
{
id:
2,
name:
'上午'
},
{
id:
3,
name:
'中午'
},
{
id:
3,
name:
'下午'
},
{
id:
3,
name:
'晚上'
}
]
],
multiIndex2: [
0,
0],
}
bindMultiPickerColumnChange2:
function (e) {
var data = {
objectMultiArray:
this.data.objectMultiArray,
multiIndex2:
this.data.multiIndex2
};
data.multiIndex2[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case
0:
switch (data.multiIndex2[
0]) {
case
0:
data.objectMultiArray[
1] = [
{ id:
0, name:
'不限' },
{ id:
1, name:
'早上' },
{ id:
2, name:
'上午' },
{ id:
3, name:
'中午' },
{ id:
4, name:
'下午' },
{ id:
5, name:
'晚上' },
];
break;
}
data.multiIndex2[
1] =
0;
break;
}
this.setData(data);
}
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>