先上效果圖:
結構這個樣子的:
<view class="edit_group_picker">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{region}}">
<view class="addr_picker_box">
<view>
<text>{{region[0][multiIndex[0]]}}</text><text>{{region[1][multiIndex[1]]}}</text>
</view>
<image class="next" src="/dist/image/next.png" />
</view>
</picker>
</view>
先獲取後臺數據
我們用的後臺數據結構如下:
在這裏插入圖片描述
//data
data: {
schoolsArr: [],
school: [],
floor: [],
region: [],
schoolId: '',//學校id
schoolTungId: '',//樓棟id
multiIndex: [0,0],
},
onLoad: function (options) {
var school = [];
var floor = [];
for (var i = 0; i < resArr.length; i++) {
school.push(resArr[i].name)
}
var sid = app.globalData.sid;//需求需要定位到當前選擇的學校。。。這個是當前學校的id
for (let k = 0; k < resArr.length; k++) {
var res = resArr[k];//resArr是後臺取出來的數據resArr==schoolsArr
if(res.id == sid){
that.setData({
schoolId: resArr[k].id,//當前定位的學校id==sid
"multiIndex[0]": k,
})
if(resArr[k].children.length>0){
for (let p = 0; p < res.children.length; p++) {
const ele = res.children[p];
floor.push(resArr[k].children[p].name)
}
that.setData({
schoolTungId: resArr[k].children[0].id,//樓棟id
})
}
}
}
that.setData({
"region[1]":floor,
floor:floor
})
},
bindMultiPickerColumnChange: function (e) {
//選擇
var that = this;
var schoolsArr = that.data.schoolsArr;//resArr是後臺取出來的數據resArr==schoolsArr
// var school = [];
var floor = [];
if (e.detail.column == 0) {
that.setData({
"region[1]":[]
})
console.log(e.detail.value);
for (let j = 0; j < schoolsArr[e.detail.value].children.length; j++) {
floor.push(schoolsArr[e.detail.value].children[j].name)
}
that.setData({
"region[1]": floor,
multiIndex: [e.detail.value,0],
schoolId: schoolsArr[e.detail.value].id
})
} else {
that.setData({
"multiIndex[1]": e.detail.value,
schoolTungId: schoolsArr[that.data.multiIndex[0]].children[e.detail.value].id
})
}
},