上篇文章介绍了小程序自定义省市二级联动选择器,但是当用户保存省市信息后再次进入页面,需要将选择器回显,这篇文章主要讲述自定义选择器回显。
实现思路:
通过后台返回的省份编码,获取该省份在省份列表数组的下标值,并根据省份编码拿到该省份下的市级列表,并把市级列表放入picker的range属性对应数组的第二列,然后根据后台返回的市级编码获取该市级在市级列表数组的下标值,拿到这两个下标值存入数组中然后赋值给picker的value属性,就实现啦~
js代码:
Page({
/**
* 页面的初始数据
*/
data: {
province_code:"",
city_code:"",
provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],
multiIndex: [0, 0],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
/**根据服务器请求返回值赋值给data,这里方便演示默认写死 */
this.setData({
province_code:"420000",
city_code:"421000"
})
var data = {
provinceCityArray: this.data.provinceCityArray
};
var multiIndexArray = [];
//获取当前省在所有省数组中的下标
for (var i = 0; i < data.provinceCityArray[0].length; i++) {
if (this.data.province_code == data.provinceCityArray[0][i].area_code) {
multiIndexArray[0] = i;
break;
}
}
var cityArray = provinceCity.getCityListByProvince(this.data.province_code);
//获取当前市在当前省所有市cityArray数组中的下标
for (var i = 0; i < cityArray.length; i++) {
if (this.data.city_code == cityArray[i].area_code) {
//根据当前市编码去匹配
multiIndexArray[1] = i;
break;
}
}
data.provinceCityArray[1] = cityArray;
this.setData({
multiIndex: multiIndexArray,
provinceCityArray: data.provinceCityArray
})
}
})
其他部分的实现可参考上一篇文章:小程序开发笔记《三》自定义省市二级联动
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
网友评论