分享小程序省市区三级联动的实现方法？

1条回答我要回复

阿罗1270天前

1.引入area.js :全国省市区
下载链接： 密码：pugd
2. address.wxml实例<view>
<view>所在区域</view>
<view bindtap="openPickerView">
<text wx:if="{{!addressName}}" >请选择详细区域</text>
<text wx:if="{{addressName}}" >{{addressName}}</text>
</view>
</view>3. address.js实例代码//引入area.js
const AreaData = require("area.js");

data: {
addressName: '', //所在地区
provId: '', //省ID
cityId: '', //市ID
areaId: '', //区ID
showPickerView: false, //控制省市区三级联动显隐
isdefault: false,//控制设置默认地址
value: [0, 0, 0],
tempValue: [0, 0, 0],
provArr: AreaData.result, //省数组
cityArr: AreaData.result[0].city, //市数组
areaArr: AreaData.result[0].city[0].area, //区数组
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let addressData = JSON.parse(options.addressData);
that.saveAddressData(addressData);
},

saveAddressData(addressData) {
let ProvArr = AreaData.result;
let valArr = [];
// 遍历省数组
for (let i = 0; i < ProvArr.length; i++) {
// console.log(ProvArr[i].id);
// 找到省对应的id
if (ProvArr[i].id == addressData.province) {
//提取对应省名
let provName = ProvArr[i].name;
// 提取对应省名在数组中对应的id
valArr.push(i);
// 提取对应省名下的城市数组
let cityArr = ProvArr[i].city;
console.log('provName:', provName);
console.log('valArr:', valArr);
// 遍历对应省名下的城市数组
for (let j = 0; j < ProvArr[i].city.length; j++) {
//console.log("cityId", ProvArr[i].city[j].id);
// 找到市对应的id
if (ProvArr[i].city[j].id == addressData.city) {
// 提取对应市名
let cityName = ProvArr[i].city[j].name;
// 提取对应市名在数组中对应的id
valArr.push(j);
// 提取对应市名下的区数组
let areaArr = ProvArr[i].city[j].area;
console.log('cityName:', cityName);
console.log('valArr:', valArr);
// 遍历对应市名下的区数组
for (let k = 0; k < ProvArr[i].city[j].area.length; k++) {

// 找到区对应的id
if (ProvArr[i].city[j].area[k].id == addressData.region) {
// 提取对应区名
let areaName = ProvArr[i].city[j].area[k].name;
// 提取对应区名在数组中对应的id
valArr.push(k);

let addressName = provName + cityName + areaName;
this.setData({
address: addressData.address,
addressName: addressName,
value: valArr,
cityArr: cityArr,
areaArr: areaArr,
provId: addressData.provName,
cityId: addressData.cityName,
areaId: addressData.areaName,
isdefault: addressData.isdefault == 1 ? true : false
})
}
}
}
}

}
}
}, //三级联动触发方法
bindChange: function (e) {
let val = e.detail.value
if (val[0] != this.data.tempValue[0]) {
val = [val[0], 0, 0]
}
if (val[1] != this.data.tempValue[1]) {
val = [val[0], val[1], 0]
}
console.log('bindChange:', val);
this.setData({
tempValue: val,
value: val,
cityArr: AreaData.result[val[0]].city,
areaArr: AreaData.result[val[0]].city[val[1]].area,
})
},

//打开省市区三级联动
openPickerView() {
this.setData({
showPickerView: true,
dleg3:true,
});
},
//关闭省市区三级联动
closePickerView() {
this.setData({
showPickerView: false ,
dleg3: false,
});
},

//省市区三级联动确定
confirmPickerView() {
let val = this.data.value;
let provName = AreaData.result[val[0]].name;
let cityName = AreaData.result[val[0]].city[val[1]].name;
let areaName = AreaData.result[val[0]].city[val[1]].area[val[2]].name;
let addressName = provName + cityName + areaName;
let provId = AreaData.result[val[0]].id;
let cityId = AreaData.result[val[0]].city[val[1]].id;
let areaId = AreaData.result[val[0]].city[val[1]].area[val[2]].id;
this.setData({
addressName: addressName,
provId: provName,
cityId: cityName,
areaId: areaName,
showPickerView: false,
isdefault: addressData.isdefault == 1 ? true : false
})
},

//设为默认地址
bindDefAddress() {
this.setData({ isdefault: !this.data.isdefault });
},
//取消按钮
bindCancelButton() {
wx.navigateBack();
},