PS:multiArray:是一个二维数组,其中有几个元素,证明是几列选择器;初始化存放的是“各列”默认数据,随着操作变化,multiArray动态存放当前选中数据对应的各列数据。(语言表达能力太差了,希望大家结合程序能看懂)
multiIndex:是一维数组,用来存放各列选中值的下标。
以下代码为官方示例,代码中进行了注释。
wxml页面:
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
<!--3列的默认值 multiArray[0][0],multiArray[1][0],multiArray[1][0] -->
{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
js页面:
/**
* 页面的初始数据
*/
data: {
index: 0,
//multiArray是二维数组,picker多列选择器只支持二维数组
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
//multiIndex一维数组,存放各列选中的值下标
//默认值multiIndex: [0, 0, 0],其中第一个0表示选中multiArray[0][0]‘无脊柱动物’,第二个0表示选中multiArray[1][0]'扁性动物',第三个0表示选中multiArray[2][0]'猪肉绦虫'
multiIndex: [0, 0, 0]
},
//bindMultiPickerChange选完数据,点击确定后触发
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
//bindMultiPickerColumnChange 选完一列,则在当前列触发一次
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
//e.detail.column 取值范围 0 1 2
//记录当前选择列的值的下标
data.multiIndex[e.detail.column] = e.detail.value;
//根据当前选择的列,联动更新后面两列的值,当e.detail.column=3时,上面一句完成赋值后,跳过下面switch,
switch (e.detail.column) {
case 0://当前滑动操作了第0列===============
switch (data.multiIndex[0]) {
case 0://无脊柱动物
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1://脊柱动物
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
//后面两列默认值都为第0个元素
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1://当前滑动操作了第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;
break;
}
console.log(data.multiIndex);
this.setData(data);
},