微信小程序的官方文檔感覺還可以，但是我在這個多列選擇器上啄磨了半天室埋，才弄明白办绝，可能是水平有限吧。但是一開始看文檔上有些東西看著很亂姚淆。所以分享一下孕蝉，如有錯誤，請多包涵腌逢。
這是小程序官網(wǎng)上的列子
<view class="section__title">多列選擇器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}降淮，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
Page({
data: {
multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']],
multiIndex: [0, 0, 0]
},
bindMultiPickerChange: function (e) {
console.log('picker發(fā)送選擇改變搏讶，攜帶值為', 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] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
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);
}
我已經(jīng)把不用的去掉了，第一次看這個其實有點(diǎn)懵
首先媒惕，大家都可以看出來系吩，多列選擇器是用的二維數(shù)組，而第一層數(shù)組里面包含多少個數(shù)組就是幾列
在wxml里面妒蔚，picker組件有幾個屬性
- mode 多列的值固定是 multiSelector
- bindchange 這是在多列選擇器點(diǎn)擊確定按鈕觸發(fā)的事件
- bindcolumnchange 這是在滾動時穿挨，值發(fā)生改變時觸發(fā)的
- value 是確定取值的，在初次加載時面睛，選擇器的取值
- range 是數(shù)據(jù)源输虱，就是準(zhǔn)備的二維數(shù)組
小例子 學(xué)期和學(xué)年的
<picker mode="multiSelector" bindchange="bindSemesterChange" bindcolumnchange="bindColumnChange" value="{{index}}" range="{{semester}}">
<view class="select">{{semester[0][index[0]]+' 第'+semester[1][index[1]]+'學(xué)期'}}</view>
</picker>
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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)
}
數(shù)據(jù)只有兩列，但是注意椒丧，最后滾動取值點(diǎn)擊確定江醇，返回的是一個數(shù)組，分別對應(yīng)第一列的取值和第二列的取值幌墓，取值的是數(shù)組的下標(biāo)
Paste_Image.png
這是滾動選項觸發(fā)的但壮，返回e.detail是一個對象，里面包含了哪一列column和列的取值value
當(dāng)點(diǎn)擊確定時常侣，e.detail返回一個value對象蜡饵，里面就是取值結(jié)果
取值結(jié)果對應(yīng)就是semester[0][2]和semester[1][0]
這個時候只要更新data里面的index就好了，wxml里面就設(shè)置成semester[0][index[0]]+' 第'+semester[1][index[1]]+'學(xué)期'
以上的小例子是兩列數(shù)據(jù)之間沒有關(guān)聯(lián)胳施，但是較容易理解溯祸，這個時候回頭來看，小程序官網(wǎng)那個是一個三級級聯(lián)的選擇器，在滾動選項時動態(tài)的變換數(shù)組內(nèi)容焦辅，達(dá)到級聯(lián)選擇的效果博杖。
文筆有限，沒有明白的可以復(fù)制代碼筷登，在控制臺里輸出一下e.detail剃根，就明白了。
