關于微信小程序三級聯(lián)動之多列選擇器的學習心得與摘抄
有些時候却舀，三級聯(lián)動業(yè)務場景并不只是全國地區(qū)選擇虫几，可能還涉及到自定義分類的三級聯(lián)動，這時就需要使用微信的多列選擇器挽拔。
如果只是一列字段辆脸，或者每次拖動一次都去服務端取，會比較容易篱昔。 如果想一次定義好json,關聯(lián)數(shù)據(jù)相對比較復雜每强，此案例json結構如下：
4276407-6e0a603d52c31256.png
效果如下：
4276407-05e3ff11c8ef5097.png
4276407-170709d81db9adc1.png
實現(xiàn)過程
1.WXML(這是一段微信官方文檔的代碼)
<view class="section">
<view class="section__title">普通選擇器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
<picker bindchange="bindPickerChange1" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
</view>
2.js 邏輯部分
// 第一步 data 定義數(shù)據(jù)
ssl:地區(qū)json
//第二步 設置默認三級聯(lián)動數(shù)據(jù)
Onload
//獲取省市區(qū)json
var ssls = this.data.ssl;
//定義對應變量
var sheng = [];
var shi = [];
var qu = [];
for (var i in ssls) {
sheng.push(ssls[i].p_name)
if (i == 0) {
for (var u in ssls[i].p_city) {
// console.log(ssls[i].p_city[u].c_name)
shi.push(ssls[i].p_city[u].c_name)
for (var j in ssls[i].p_city[u].p_district) {
// console.log(ssls[i].p_city[u].c_name)
qu.push(ssls[i].p_city[u].p_district[j].d_name)
}
}
}
}
console.log(sheng, shi);
this.setData({
multiArray: [sheng, shi, qu]
});
//第三步：選擇對應的value值改變
bindMultiPickerChange: function (e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
//第四步：下拉拖動選項事件（這里只需要處理第一欄州刽，與第二欄【因為第三欄拖動的時候空执，沒有第四欄關聯(lián)變動了，關于此處講的欄穗椅，請看代碼后圖1-3】）
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:
this.setData({
thisSheng: e.detail.value
})
//此處是拖動第一欄的時候處理
var row = this.getCity(e.detail.value);
data.multiArray[1] = row[0];
data.multiArray[2] = row[1];
//此處默認選中第一項
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
//此處是拖動第二欄的時候處理
var row = this.getCity(this.data.thisSheng, e.detail.value);
console.log(row);
data.multiArray[2] = row[1];
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
關鍵處理函數(shù)
// 獲取城市信息
getCity: function (x, y = 999, z = 999) {
console.log("xy", x, y);
var ssls = this.data.ssl;
var shi = [];
var qu = [];
for (var i in ssls) {
if (i == x) {
for (var u in ssls[i].p_city) {
shi.push(ssls[i].p_city[u].c_name)
if (u == y) {
for (var j in ssls[i].p_city[u].p_district) {
qu.push(ssls[i].p_city[u].p_district[j].d_name)
}
break;
}
if (y == 999) {
for (var j in ssls[i].p_city[u].p_district) {
qu.push(ssls[i].p_city[u].p_district[j].d_name)
}
}
}
break;
}
}
console.log(shi);
return [shi, qu];
},
4276407-be01613c573a790d.png
這樣基本手動實現(xiàn)一次官方的全國地區(qū)選擇功能，只是相比官方更靈活匹表，能添加更多種類型门坷。
工作較忙宣鄙，更新慢-.-
