小程序--三级联动

小程序--三级联动

最近作的项目中须要添加三级联动，选择所在地，而其中三级联动是自定义的，因此选择多列选择器。

小程序关于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时的状况