小程序开发注意事项四Picker呼应省市联动

本文介绍了如何通过小程序定制省市二级联动选择器。但是，当用户在保存省市信息后再次进入页面时，需要呼应选择器。本文重点介绍用户定义选择器的回声。

实施思路：

通过后台返回的省代码获取省列表数组中省的下标值，根据省代码获取该省的城市级列表，将城市级列表放在与选择器的范围属性相对应的数组的第二列，然后根据后台返回的城市代码在城市列表数组中获取城市的下标值，将两个下标值存储在数组中，并将它们分配给选择器的值属性~

Js代码：

第页({

/**

*页面的初始数据

*/

数据：{

省份代码：“”，

城市代码：“”，

provinceCityArray:[省城市获取省列表，省城市获取市列表（“110000”）]，

多索引：[0，0]，

},

/**

*生命周期功能——监听页面加载

*/

onLoad:函数（选项）{

/**根据服务器请求将返回值分配给数据。演示默认写入是死的很方便*/

this.set数据({

省代码：“420000”，

城市代码：“421000”

})

var数据={

provinceCityArray：此数据。省城市阵列

};

var multiIndexArray=[]；

//获取所有省份数组中当前省份的下标

对于（var i=0；i

if（this.data.province_code==data.provenceCityArray[0][i].area_code）{

multiIndexArray[0]=i；

打破

}

}

var cityArray=provinceCity.getCityListByProvince（this.data.province_code）；

//获取当前省所有城市的cityArray数组中当前城市的下标

对于（var i=0；i

如果（this.data.city_code==cityArray[i].area_code）{

//根据当前城市代码匹配

multiIndexArray[1]=i；

打破

}

}

数据provinceCityArray[1]=城市阵列；

this.set数据({

multiIndex：多索引数组，

provinceCityArray：数据.provinceCity阵列

})

}

})

有关其他部分的实现，请参阅上一篇文章：

原作者的技术博客：