小程序--三级联动
小程序--三级联动
最近做的项目中需要添加三级联动，选择所在地，而其中三级联动是自定义的，所以选择多列选择器。
小程序关于picker的官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
效果图：
关于wxml页面很简单，就一行代码，相关的属性可以看文档来自己定义，这里简单说明一下是如何渲染的，以及渲染过程中出现的问题。
wxml：
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range="{{multiArray}}">
<view>
{{multiSelect}}
</view>
</picker>
通过接口返回的数据结构如下图：
如此可见返回的是对象，需要转换成数组才可在页面上渲染
因为后期会多次用到对象转换为数组，将此封装为一个函数
js：
//将js对象变为数组--三级联动
toArr(object) { //object要遍历的对象 name--我需要的数据，可自定义
var arr = [];//返回的数组
for (var i in object) {
arr.push(object[i].name); //属性
}
return arr;
}
在转换数组的过程中，需要找到相应的某一项下面的所有数据，所以在此基础上添加查找某一项的功能
js：
//将js对象变为数组--三级联动
toArr(object, findItem) { //object要遍历的对象 findItem查找项
var nameList = [];//返回的数组
var itemList = [];
var allMessage;
for (var i in object) {
nameList.push(object[i].name); //属性
if (findItem && object[i].name == findItem) { //遍历对象，找到findItem的所有数据
itemList = object[i];
}
}
if (findItem){
allMessage = { 'nameList': nameList, 'itemList': itemList }
}else{
allMessage = { 'nameList': nameList}
}
return allMessage;
}
准备工作做完，将获取到到数据整理出来
js：
data: {
multiArray: [], //国家省份三级联动数组
objectMultiArray:'', //中国省份数组
countriesShowList: [], //展示的国家数组
provincesShowList:[], //展示的省份数组
citiesShowList:[], //展示的地区数组
provincesShow:false, //是否第一次渲染省份数组
multiSelect: '>', //选中的所在地
},
// 获取三级联动数据
brm.brm_request(接口地址) 发送request请求
.then(function (res) {
var arr = that.toArr(res.data, "中国")
console.log(res.data)
that.setData({
multiArray: [arr.nameList, ['——'], ['——']],
objectMultiArray: arr.itemList,
countriesShowList: arr.nameList
})
}, function (err) {
});
//城市三级联动选中
bindMultiPickerChange: function (e) {
var index = e.detail.value;
var arr;
if (index[0] == 36){ //选中中国
if(index[1]== null){
if (this.data.citiesShowList[index[2]]&&this.data.citiesShowList[index[2]] != '——'){
arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0] + ',' + this.data.citiesShowList[index[2]]
}else{
arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0]
}
}else{
if (this.data.citiesShowList[index[2]] && this.data.citiesShowList[index[2]] != '——') {
arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]] + ',' + this.data.citiesShowList[index[2]]
} else {
arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]]
}
}
} else {
arr = this.data.countriesShowList[index[0]]
}
this.setData({
multiSelect: arr
})
}
//三级联动城市改变
bindMultiPickerColumnChange: function (e) {
var provincesList = this.data.objectMultiArray.provinces; //省份
var provincesArr = this.toArr(provincesList).nameList; //省份数组
//移动第一列时，选中中国的情况
if (e.detail.column == 0 && e.detail.value == 36){
this.setData({
multiArray: [this.data.multiArray[0], provincesArr, ['——']],
provincesShowList:provincesArr,
provincesShow:true
})
} else if (e.detail.column == 0 && e.detail.value != 36){ //选中非中国的国家情况
this.setData({
multiArray: [this.data.multiArray[0], ['——'], ['——']]
})
}
//移动第二列，选中相应的省份显示地区
if (e.detail.column == 1 && this.data.provincesShow){
var findProvincesList = this.toArr(provincesList, provincesArr[e.detail.value]); //provincesArr[e.detail.value] 当前选中的省份
var findCitiesList = this.toArr(findProvincesList.itemList.cities); //当前选中省份的地区数组
var citiesList ;
if (findCitiesList.nameList.length > 0){ //当前省份是否有城市
citiesList = findCitiesList.nameList;
}else{
citiesList = ['——'];
}
this.setData({
multiArray: [this.data.multiArray[0], provincesArr, citiesList],
citiesShowList: citiesList
})
}
}
在渲染过程中，遇到的问题：
1.进入页面后，会默认执行了bindcolumnchange事件，并且每一列都移动一次；所以在bindMultiPickerColumnChange函数中，就会执行“移动第二列，选中相应的省份显示地区”，所以在这里需要给它加一个标识this.data.provincesShow
2.默认选中中国后，不移动第二列，那第二列返回的移动数据为null；多处理一次为null时的情况
