一、效果圖
二彭则、picker屬性
一個簡單地多列選擇器只要給picker組件加屬性mode="multiSelector"即可梗逮，綁定數(shù)據(jù)時使用range來綁定一個數(shù)組作為顯示內(nèi)容挖诸，下面是官方給出的屬性解釋。
三、代碼
wxml：
<picker
mode="multiSelector"
bindchange="bindCustomPickerChange"
bindcolumnchange="bindCustomPickerColumnChange"
value="{{customIndex}}"
range="{{onlyArray}}"
>
<view>
多列自創(chuàng)選擇器：{{onlyArray[0][customIndex[0]]}}位仁，{{onlyArray[1][customIndex[1]]}}窃躲，{{onlyArray[2][customIndex[2]]}}
</view>
</picker>
要注意的是，此處的onlyArray數(shù)組只是當(dāng)前顯示內(nèi)容的數(shù)組掖棉，并不是我們?nèi)繑?shù)據(jù)的數(shù)組墓律。
js：
1.先創(chuàng)建頁面所需數(shù)據(jù)
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//當(dāng)前選中數(shù)組的下標(biāo)值
customIndex: [0, 0, 0],
//當(dāng)前選中數(shù)組
onlyArray: [
[],
[],
[]
],
//customArray假設(shè)為我們從后臺獲取到的json數(shù)據(jù)
customArray: [{
name: '百度',
dept: [{
name: '搜索',
product: [{
name: '百度搜索'
},
{
name: '百度一下'
},
]
},
{
name: '團購',
product: [{
name: '百度糯米'
}, {
name: '餓了么'
}]
},
{
name: '音樂',
product: [{
name: '百度音樂'
}]
},
{
name: '問答社區(qū)',
product: [{
name: '百度貼吧'
}]
}
]
},
{
name: '騰訊',
dept: [{
name: '交際',
product: [{
name: 'QQ'
},
{
name: '微信'
},
]
},
{
name: '視頻',
product: [{
name: '騰訊視頻'
},
{
name: '搜狐視頻'
},
]
},
{
name: '短視頻',
product: [{
name: '微視'
}]
}
]
},
],
},
2.加載頁面時給出賦值函數(shù)。
可以看到幔亥，當(dāng)前選中數(shù)組onlyArray是空的耻讽，在小步伐顯示時會直接顯示成空，以是需要在頁面創(chuàng)建時給一個初始值帕棉，這個初始值使用customIndex數(shù)組來給出针肥，也可以用于頁面數(shù)據(jù)回填饼记。代碼如下：
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
var data = {
customArray: this.data.customArray,
customIndex: this.data.customIndex,
onlyArray: this.data.onlyArray,
};
for (var i = 0; i < data.customArray.length; i++) {
data.onlyArray[0].push(data.customArray[i].name);
}
for (var j = 0; j < data.customArray[data.customIndex[0]].dept.length; j++) {
data.onlyArray[1].push(data.customArray[data.customIndex[0]].dept[j].name);
}
for (var k = 0; k < data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product.length; k++) {
data.onlyArray[2].push(data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product[k].name);
}
this.setData(data);
},
3.創(chuàng)建組件監(jiān)聽函數(shù)。
這里需要兩個函數(shù)慰枕，分別是bindchange(打開組件后點擊確定觸發(fā))和bindcolumnchange（打開組件后滑動列觸發(fā)）具则。
//多列自界說選擇器改變value的方法
bindCustomPickerChange: function(e) {
var customArray = this.data.customArray,
customIndex = this.data.customIndex,
onlyArray = this.data.onlyArray;
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value);
//此處e.detail.value為當(dāng)前選擇的列的下標(biāo)值數(shù)組具帮，如[0,1,0]
console.log('picker終極選擇值為：', onlyArray[0][customIndex[0]], onlyArray[1][customIndex[1]], onlyArray[2][customIndex[2]]);
this.setData({
customIndex: e.detail.value
})
},
//多列自創(chuàng)選擇器換列方法
bindCustomPickerColumnChange: function(e) {
var customArray = this.data.customArray,
customIndex = this.data.customIndex,
onlyArray = this.data.onlyArray;
customIndex[e.detail.column] = e.detail.value;
// console.log(onlyArray);
var searchColumn = () => {
for (var i = 0; i < customArray.length; i++) {
var arr1 = [];
var arr2 = [];
if (i == customIndex[0]) {
for (var j = 0; j < customArray[i].dept.length; j++) {
arr1.push(customArray[i].dept[j].name);
if (j == customIndex[1]) {
for (var k = 0; k < customArray[i].dept[j].product.length; k++) {
arr2.push(customArray[i].dept[j].product[k].name);
}
onlyArray[2] = arr2;
}
}
onlyArray[1] = arr1;
}
};
}
switch (e.detail.column) {
case 0:
customIndex[1] = 0;
customIndex[2] = 0;
searchColumn();
break;
case 1:
customIndex[2] = 0;
searchColumn();
break;
}
this.setData({
onlyArray: onlyArray,
customIndex: customIndex
});
},
