picker组件效果 官方文档：
Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' } ], index: 0, multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], objectMultiArray: [ [ { id: 0, name: '无脊柱动物' }, { id: 1, name: '脊柱动物' } ], [ { id: 0, name: '扁性动物' }, { id: 1, name: '线形动物' }, { id: 2, name: '环节动物' }, { id: 3, name: '软体动物' }, { id: 3, name: '节肢动物' } ], [ { id: 0, name: '猪肉绦虫' }, { id: 1, name: '吸血虫' } ] ], multiIndex: [0, 0, 0], date: '2016-09-01', time: '12:01', region: ['广东省', '广州市', '海珠区'], customItem: '全部' }, bindPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndex[0]) { case 0: data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; data.multiArray[2] = ['鲫鱼', '带鱼']; break; } data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: switch (data.multiIndex[0]) { case 0: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[2] = ['蛔虫']; break; case 2: data.multiArray[2] = ['蚂蚁', '蚂蟥']; break; case 3: data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; break; case 4: data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; break; } break; case 1: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['鲫鱼', '带鱼']; break; case 1: data.multiArray[2] = ['青蛙', '娃娃鱼']; break; case 2: data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; break; } break; } data.multiIndex[2] = 0; console.log(data.multiIndex); break; } this.setData(data); }, bindDateChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, bindTimeChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ time: e.detail.value }) }, bindRegionChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ region: e.detail.value }) }})
Gary 微信小程序普通选择器 当前选择：{ {array[index]}} 多列选择器 当前选择：{ {multiArray[0][multiIndex[0]]}}，{ {multiArray[1][multiIndex[1]]}}，{ {multiArray[2][multiIndex[2]]}} 时间选择器 当前选择: { {time}} 日期选择器 当前选择: { {date}} 省市区选择器 当前选择：{ {region[0]}}，{ {region[1]}}，{ {region[2]}}
{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
picker底部弹起的滚动选择器 支持五种选择器 ：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器
实现过程
普通选择器
普通选择器 当前选择：{ {array[index]}}
绑定数值到选择器上，index初始化时下标为0
array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' } ], index: 0,
多列选择器
多列选择器 当前选择：{ {multiArray[0][multiIndex[0]]}}，{ {multiArray[1][multiIndex[1]]}}，{ {multiArray[2][multiIndex[2]]}}
绑定数值到选择器上，multiIndex: [0, 0, 0]初始化时指向第一个元素
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], objectMultiArray: [ [ { id: 0, name: '无脊柱动物' }, { id: 1, name: '脊柱动物' } ], [ { id: 0, name: '扁性动物' }, { id: 1, name: '线形动物' }, { id: 2, name: '环节动物' }, { id: 3, name: '软体动物' }, { id: 3, name: '节肢动物' } ], [ { id: 0, name: '猪肉绦虫' }, { id: 1, name: '吸血虫' } ] ], multiIndex: [0, 0, 0],
时间选择器
时间选择器 当前选择: { {time}}
绑定数值到选择器上，初始化时时间为12：01
time: '12:01',
日期选择器
日期选择器 当前选择: { {date}}
绑定数值到选择器上，初始化时日期为date: '2016-09-01',
date: '2016-09-01',
省市区选择器
省市区选择器 当前选择：{ {region[0]}}，{ {region[1]}}，{ {region[2]}}
绑定数值到选择器上，初始化时为 广东省-广州市-海珠区
region: ['广东省', '广州市', '海珠区'],
添加函数绑定到选择器上，滑动选择器可修改选择器上的数值
bindPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndex[0]) { case 0: data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; data.multiArray[2] = ['鲫鱼', '带鱼']; break; } data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: switch (data.multiIndex[0]) { case 0: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[2] = ['蛔虫']; break; case 2: data.multiArray[2] = ['蚂蚁', '蚂蟥']; break; case 3: data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; break; case 4: data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; break; } break; case 1: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['鲫鱼', '带鱼']; break; case 1: data.multiArray[2] = ['青蛙', '娃娃鱼']; break; case 2: data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; break; } break; } data.multiIndex[2] = 0; console.log(data.multiIndex); break; } this.setData(data); }, bindDateChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, bindTimeChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ time: e.detail.value }) }, bindRegionChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ region: e.detail.value }) }