<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
</view>
</picker>
Page({
data: {
multiIndex: []
},
//市级
searchClassInfo(xiaoqu_id) {
var that = this;
if (xiaoqu_id) {
this.setData({
pid: xiaoqu_id
}, () => {
wx.request({
url: 'http://192.168.3.137:81/api/v2/getCityListByProvinceId',
https: '',
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {
"province_id": that.data.pid
},
success: function(res) {
console.log(res);
var classList = res.data;
var classArr = classList.map(item => {
console.log(item.name)
return item.name;
})
var xiaoquArr = that.data.xiaoquArr;
that.setData({
multiArray: [xiaoquArr, classArr],
classArr,
classList
})
}
})
})
}
},
bindMultiPickerColumnChange: function(e) {
//e.detail.column 改变的数组下标列, e.detail.value 改变对应列的值
console.log(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;
var pid_session = this.data.pid; // 保持之前的省id 与新选择的id 做对比,如果改变则重新请求数据
switch (e.detail.column) {
case 0:
var xiaoquList = this.data.xiaoquList;
var pid = xiaoquList[e.detail.value]['id'];
if (pid_session != pid) { // 与之前保持的省id做对比,如果不一致则重新请求并赋新值
this.searchClassInfo(pid);
}
data.multiIndex[1] = 0;
break;
}
this.setData(data);
},
bindMultiPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
var class_key = 0;
var classList = this.data.classList;
var select_key = e.detail.value[1];
var real_key = select_key - 1;
if (real_key < class_key) {
this.setData({
cid: 0
})
} else {
this.setData({
cid: classList[real_key]['cid'] // class_id 代表着选择的市级对应的 班级id
})
}
this.setData({
multiIndex: e.detail.value
})
},
//省级
onLoad: function() {
var that = this;
wx.request({
url: 'http://192.168.3.137:81/api/v2/getCityListByProvinceId',
data: {
province_id:1
},
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res);
var xiaoquList = res.data;
console.log(xiaoquList)
var xiaoquArr = xiaoquList.map(item => { // 此方法将省名称区分到一个新数组中
console.log(item.name)
return item.name;
});
console.log(xiaoquArr)
that.setData({
multiArray: [xiaoquArr, []],
xiaoquList,
xiaoquArr
})
var default_xiaoqu_id = xiaoquList[0]['id']; //获取默认的省对应的id
if (default_xiaoqu_id) {
that.searchClassInfo(default_xiaoqu_id) // 如果存在调用获取对应的省级数据
}
}
})
}
})