先讲一下需求
服务端提供了省、市两个接口，市的接口通过省的pid进行关联，所以小程序直接提供的地区选择picker不适用（或者有我不知道的方法，话不能说满哈哈）。
方案是用小程序picker组件提供的多项选择mode，自己写了一个二级联动，或不多说上代码：
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
</view>
</picker>
js文件
Page({
data: {
multiIndex:[]
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
searchClassInfo(xiaoqu_id) {
var that = this;
if (xiaoqu_id) {
this.setData({
pid: xiaoqu_id
}, () => {
wx.request({
url: ''https://www.XXX.com/XXX/XXX',',
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {
"pid": that.data.pid
},
success: function (res) {
console.log(res);
var classList = res.data.data;
var classArr = classList.map(item => {
return item.city;
})
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]['pid'];
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: 'https://www.XXX.com/XXX/XXX',
data: {},
method:"POST",
header: {
'content-type': 'application/json' // 默认值
},
success:function(res) {
console.log(res);
var xiaoquList = res.data.data;
var xiaoquArr = xiaoquList.map(item => { // 此方法将校区名称区分到一个新数组中
return item.province;
});
that.setData({
multiArray: [xiaoquArr, []],
xiaoquList,
xiaoquArr
})
var default_xiaoqu_id = xiaoquList[0]['pid']; //获取默认的校区对应的 teach_area_id
if (default_xiaoqu_id) {
that.searchClassInfo(default_xiaoqu_id) // 如果存在调用获取对应的班级数据
}
}
})
}
})
由于借鉴了【小程序 picker 多列选择器 数据动态获取】，所以请无视那些命名奇怪的变量。
原文链接：https://www.cnblogs.com/inzaghihao/p/7844844.html
踩的坑：
由于原文没有贴js文件的data部分，于是天真的我就进坑了
如果没有预先在data里定义multiIndex，则在打开滑动框并鼠标移入后会出现以下报错
QQ截图20180815110411.png
错误解释：
在第一次打开时，multiIndex还未被定义，浏览器无法识别其为数组，所以wxml中的picker无法获取第一次的index
