微信小程序选择地址省市区三级联动 微信小程序实现选择地址省市区三级联动
上木—下水 人气:0微信原生地址API，缺少省市区code，因此自己写了一个收货地址
思路：在onload预先加载全部省和第一个省的全部市和区，加载全部会导致几秒的事件阻塞。点击选择地址弹窗后，按需加载操作，滑动省加载对应的市和第一个市对应的区，滑动市加载区，滑动区只更改区的值
onLoad: function(options) {
var that = this;
// 此文件为全部省以及第一个省的市和区
var cityData = districtLoad.districtLoad;
// 存放省
const provinces = [];
// 存放市
const citys = [];
// 存放区
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i]);
}
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i])
}
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i])
}
that.setData({
provinces,
citys,
countys
})
}
滑动省市区事件
bindChange: function(e) {
var that = this;
var val = e.detail.value
var t = this.data.values;
// 滑动省
if (val[0] != t[0]) {
const citys = [];
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i])
}
// 保存第一个市的全部区
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i])
}
// 保存
this.setData({
province: cityData[val[0]].name,
city: cityData[val[0]].sub[0].name,
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
fdeliveryProvince: this.data.provinces[val[0]].code,
fdeliveryCity: cityData[val[0]].sub[0].code,
})
// 防止只有省市的情况
if (cityData[val[0]].sub[0].sub.length!=0){
that.setData({
county: cityData[val[0]].sub[0].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
})
}else {
that.setData({
county: '',
fdeliveryArea:''
})
}
return;
}
// 滑动市
if (val[1] != t[1]) {
const countys = [];
// 保存市
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i])
}
// 保存
this.setData({
city: this.data.citys[val[1]].name,
countys: countys,
values: val,
value: [val[0], val[1], 0],
fdeliveryCity: this.data.citys[val[1]].code,
})
// 防止只有省市的情况
if (countys.length != 0) {
that.setData({
county: cityData[val[0]].sub[val[1]].sub[0].name,
fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
})
} else {
that.setData({
county: '',
fdeliveryArea: ''
})
}
return;
}
// 滑动区
if (val[2] != t[2]) {
this.setData({
county: this.data.countys[val[2]].name,
values: val,
fdeliveryArea: this.data.countys[val[2]].code
})
return;
}
}
html
<view class="citypicker" wx:if="{{condition}}">
<view class="cityheader">
<view bindtap="open" class="city-cancel">取消</view>
<view bindtap="open" class="city-true">确定</view>
</view>
<picker-view indicator-style="height: 40px;" style="font-size:30rpx; width: 100%; height: 290px;" value="{{value}}" bindchange="bindChange" class="citybody">
<picker-view-column>
<view wx:for="{{provinces}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{citys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{countys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
效果图
加载全部内容