picker（从底部弹起的滚动选择器）
·header-text 解释：选择器的标题，仅安卓可用
·mode 解释：选择器类型
mode的类型包括：
举例：
1.selector：普通选择器
wxml：
<view><view>普通选择器</view><pickerbindchange="bindPickerChange"value="{{index}}"range="{{array}}"><view> 当前选择：{{array[index]}} </view></picker></view>
js：
Page({ data: { array: ['剑豪', '剑圣', '剑姬', '剑魔'], objectArray: [ { id: 0, name: '剑豪' }, { id: 1, name: '剑圣' }, { id: 2, name: '剑姬' }, { id: 3, name: '剑魔' } ], index: 0, }, bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, })
效果展示：
2.multiSelector：多列选择器
wxml：
<view><view>多列选择器</view><pickermode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}"range="{{multiArray}}"><viewclass="picker"> 当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view></picker></view>
js：
Page({ data: { multiArray: [['英雄联盟', '地下城与勇士'], ['上路', '打野', '中路', 'ADC', '辅助',], ['诺手', '狗头']], objectMultiArray: [ [ { id: 0, name: '英雄联盟' }, { id: 1, name: '地下城与勇士' } ], [ { id: 0, name: '上路' }, { id: 1, name: '打野' }, { id: 2, name: '中路' }, { id: 3, name: 'ADC' }, { id: 3, name: '辅助' } ], [ { id: 0, name: '诺手' }, { id: 1, name: '狗头' } ] ], multiIndex: [0, 0, 0], }, bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value); vardata= { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] =e.detail.value; switch (e.detail.column) { case0: switch (data.multiIndex[0]) { case0: data.multiArray[1] = ['上路', '打野', '中路', 'ADC', '辅助']; data.multiArray[2] = ['诺手', '狗头']; break; case1: data.multiArray[1] = ['鬼剑', '枪剑', '魔法师']; data.multiArray[2] = ['红眼', '阿修罗']; break; } data.multiIndex[1] =0; data.multiIndex[2] =0; break; case1: switch (data.multiIndex[0]) { case0: switch (data.multiIndex[1]) { case0: data.multiArray[2] = ['诺手', '狗头']; break; case1: data.multiArray[2] = ['狮子狗','螳螂','豹女','蜘蛛']; break; case2: data.multiArray[2] = ['亚索', '冰女','卡牌','艾克']; break; case3: data.multiArray[2] = ['烬', '卡沙', '女枪','卢锡安']; break; case4: data.multiArray[2] = ['泰坦', '莫甘娜', '派克', '日女']; break; } break; case1: switch (data.multiIndex[1]) { case0: data.multiArray[2] = ['红眼', '阿修罗']; break; case1: data.multiArray[2] = ['机械', '前线']; break; case2: data.multiArray[2] = ['逐风', '元素', '嗜血']; break; } break; } data.multiIndex[2] =0; break; } console.log(data.multiIndex); this.setData(data); }, })
效果：
3.time：时间选择器
wxml：
<view><view>时间选择器</view><pickermode="time"value="{{time}}"start="09:01"end="21:01"bindchange="bindTimeChange"><view> 当前选择: {{time}} </view></picker></view>
js：
Page({ data: { time: '12:01' }, bindTimeChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ time: e.detail.value }) }, })
效果：
4.date：日期选择器
wxml：
<view><view>日期选择器</view><pickermode="date"value="{{date}}"start="2000-09-01"end="2050-09-01"bindchange="bindDateChange"><view> 当前选择: {{date}} </view></picker></view>
js：
Page({ data: { date: '2016-09-01' }, bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, })
效果：
5. region：省市区选择器
wxml：
<view><view>省市区选择器</view><pickermode="region"bindchange="bindRegionChange"value="{{region}}"custom-item="{{customItem}}"><view> 当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}} </view></picker></view>
js：
Page({ data: { region: ['广东省', '广州市', '海珠区'] }, bindRegionChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ region: e.detail.value }) } })
