其实这篇文章也是我自己想要保存一下而已,公司的需要用到自己的地址库,然后就写了这样的需求。
wxml代码如下(效果就是很普通的省市区选择器)
<view class='site-v dflex no-bot'>
<view class='site-l c6'>收货地址</view>
<picker class='flex-1 site-sex {{address?"":"cc"}}' mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{site}}" range="{{siteRange}}" range-key="areaName">{{address?address:'选择省市区'}}
<icon class='iconfont iconenter site-icon'></icon>
</picker>
</view>
js部分(只截取了关于选择器的代码)
onLoad: function (options) {
address.getAllArea().then(res => {
// console.log(res)
let temp = res.d.province_0;//省市区三维数组
let siteRange = [temp, temp[0].city, temp[0].city[0].area]
this.setData({
provinces: temp,//保存三维数组
siteRange,//当前显示的省市区
site: [0, 0, 0]
})
})
}
data: {
address:'',//省市区选择
siteRange:[],//省市区选择器
provinces:[],
},
//点击确定
bindMultiPickerChange(e){
// console.log('picker发送选择改变,携带值为', e.detail.value);
const siteRange = this.data.siteRange
// console.log(siteRange[0][e.detail.value[0]].areaName, siteRange[1][e.detail.value[1]].areaName, siteRange[2][e.detail.value[2]].areaName)
this.setData({
site: e.detail.value,
address: siteRange[0][e.detail.value[0]].areaName +''+ siteRange[1][e.detail.value[1]].areaName +''+ siteRange[2][e.detail.value[2]].areaName,
provinceName: siteRange[0][e.detail.value[0]].areaName,
cityName: siteRange[1][e.detail.value[1]].areaName,
districtName: siteRange[2][e.detail.value[2]].areaName,
provinceId: siteRange[0][e.detail.value[0]].id,
cityId: siteRange[1][e.detail.value[1]].id,
districtId: siteRange[2][e.detail.value[2]].id,
})
},
//滑动
bindMultiPickerColumnChange(e){
// console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var data = {
siteRange: this.data.siteRange,
site: this.data.site,
provinces: this.data.provinces
};
// 修改省
if (e.detail.column==0){
data.site = [e.detail.value,0,0]
data.siteRange = [data.provinces, data.provinces[e.detail.value].city, data.provinces[e.detail.value].city[0].area]
this.setData({
site: data.site,
siteRange: data.siteRange
})
}
//修改市
if (e.detail.column==1){
// data.siteRange[1][e.detail.value].area
data.siteRange[2] = data.siteRange[1][e.detail.value].area
data.site[1] = e.detail.value
data.site[2]=0
this.setData({
siteRange: data.siteRange,
site: data.site,
})
}
},