微信小程序的官方文档感觉还可以，但是我在这个多列选择器上啄磨了半天，才弄明白，可能是水平有限吧。但是一开始看文档上有些东西看着很乱。所以分享一下，如有错误，请多包涵。
这是小程序官网上的列子
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
Page({
data: {
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
multiIndex: [0, 0, 0]
},
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);
}
我已经把不用的去掉了，第一次看这个其实有点懵
首先，大家都可以看出来，多列选择器是用的二维数组，而第一层数组里面包含多少个数组就是几列
在wxml里面，picker组件有几个属性
- mode 多列的值固定是 multiSelector
- bindchange 这是在多列选择器点击确定按钮触发的事件
- bindcolumnchange 这是在滚动时，值发生改变时触发的
- value 是确定取值的，在初次加载时，选择器的取值
- range 是数据源，就是准备的二维数组
小例子 学期和学年的
<picker mode="multiSelector" bindchange="bindSemesterChange" bindcolumnchange="bindColumnChange" value="{{index}}" range="{{semester}}">
<view class="select">{{semester[0][index[0]]+' 第'+semester[1][index[1]]+'学期'}}</view>
</picker>
Page({
/**
* 页面的初始数据
*/
data: {
semester: [[ '2014-2015', '2015-2016','2016-2017','2017-2018' ],['1','2']],
index:[0,0]
},
/**
*
*/
bindSemesterChange:function(e){
console.log(e.detail)
this.setData({
index: e.detail.value
})
},
bindColumnChange:function(e){
console.log(e.detail)
}
数据只有两列，但是注意，最后滚动取值点击确定，返回的是一个数组，分别对应第一列的取值和第二列的取值，取值的是数组的下标
Paste_Image.png
这是滚动选项触发的，返回e.detail是一个对象，里面包含了哪一列column和列的取值value
当点击确定时，e.detail返回一个value对象，里面就是取值结果
取值结果对应就是semester[0][2]和semester[1][0]
这个时候只要更新data里面的index就好了，wxml里面就设置成semester[0][index[0]]+' 第'+semester[1][index[1]]+'学期'
以上的小例子是两列数据之间没有关联，但是较容易理解，这个时候回头来看，小程序官网那个是一个三级级联的选择器，在滚动选项时动态的变换数组内容，达到级联选择的效果。
文笔有限，没有明白的可以复制代码，在控制台里输出一下e.detail，就明白了。
