上篇文章介紹了小程序自定義省市二級(jí)聯(lián)動(dòng)選擇器牢撼，但是當(dāng)用戶保存省市信息后再次進(jìn)入頁(yè)面淮逻，需要將選擇器回顯，這篇文章主要講述自定義選擇器回顯皱埠。
實(shí)現(xiàn)思路：
通過后臺(tái)返回的省份編碼肮帐，獲取該省份在省份列表數(shù)組的下標(biāo)值，并根據(jù)省份編碼拿到該省份下的市級(jí)列表边器，并把市級(jí)列表放入picker的range屬性對(duì)應(yīng)數(shù)組的第二列训枢，然后根據(jù)后臺(tái)返回的市級(jí)編碼獲取該市級(jí)在市級(jí)列表數(shù)組的下標(biāo)值，拿到這兩個(gè)下標(biāo)值存入數(shù)組中然后賦值給picker的value屬性忘巧，就實(shí)現(xiàn)啦~
js代碼：
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
province_code:"",
city_code:"",
provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],
multiIndex: [0, 0],
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function(options) {
/**根據(jù)服務(wù)器請(qǐng)求返回值賦值給data,這里方便演示默認(rèn)寫死 */
this.setData({
province_code:"420000",
city_code:"421000"
})
var data = {
provinceCityArray: this.data.provinceCityArray
};
var multiIndexArray = [];
//獲取當(dāng)前省在所有省數(shù)組中的下標(biāo)
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);
//獲取當(dāng)前市在當(dāng)前省所有市cityArray數(shù)組中的下標(biāo)
for (var i = 0; i < cityArray.length; i++) {
if (this.data.city_code == cityArray[i].area_code) {
//根據(jù)當(dāng)前市編碼去匹配
multiIndexArray[1] = i;
break;
}
}
data.provinceCityArray[1] = cityArray;
this.setData({
multiIndex: multiIndexArray,
provinceCityArray: data.provinceCityArray
})
}
})
其他部分的實(shí)現(xiàn)可參考上一篇文章：小程序開發(fā)筆記《三》自定義省市二級(jí)聯(lián)動(dòng)
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
