微信小程序--picker

在为发现小程序官方提供了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>