小编给大家分享一下小程序开发中实现地址页面三级联动的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
我遇到的问题是
cdn.xitu.io/2018/5/29/163aa02a0f83cf57?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">
后端给我的数据里面有每一个地址对应的ID,比如北京:2 北京:50 东城区:500
处理这个数据的时候,我根据原来大神的代码做了一些修改,
let val = e.detail.value,
t = this.data.values,
cityData = this.data.cityData,
index = this.data.id,
list = this.data.addrList;
list[index].area = true;
try { if (val[0] != t[0]) { //当val是选择省份的时候
const citys = [];
const countys = [];
cityData[val[0]].child.map(item => citys.push({name:item.name,id:item.id}));
cityData[val[0]].child[0].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].provinceName = this.data.provinces[val[0]].name;//省份
list[index].cityName = cityData[val[0]].child[0].name;//城市
list[index].districtName = cityData[val[0]].child[0].child[0].name;//地区
list[index].province = this.data.provinces[val[0]].id;//对应的传值ID
list[index].city = cityData[val[0]].child[0].id;//对应的传值ID
list[index].district = cityData[val[0]].child[0].child[0].id;//对应的传值ID
this.setData({
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
addrList: list
}) return;
} if (val[1] != t[1]) {//当val是选择城市的时候
const countys = [];
cityData[val[0]].child[val[1]].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].cityName = this.data.citys[val[1]].name;// 选择城市
list[index].city = this.data.citys[val[1]].id;//对应的传值ID
list[index].districtName = cityData[val[0]].child[val[1]].child[0].name;//选择城市对应的地区
list[index].district = cityData[val[0]].child[val[1]].child[0].id;//对应的传值ID
this.setData({
countys: countys,
values: val,
value: [val[0], val[1], 0],
addrList: list
}) return;
} if (val[2] != t[2]) {//当val是选择地区的时候
list[index].districtName = this.data.countys[val[2]].name;//选择地区
list[index].district = this.data.countys[val[2]].id;//对应的传值ID
this.setData({
county: this.data.countys[val[2]].name,
values: val,
addrList: list
}) return;
}
} catch(e) {
// statements
console.log(e);
}
list里面是有 收货人,电话,等等信息 但是我只操作改变数组里面地址改变的信息,
布局方面需要做一些修改的地方就是
看完了这篇文章,相信你对小程序开发中实现地址页面三级联动的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。