最近在开发微信小程序的时候,遇到了一个实现省市二级联动的需求~
按常理来说省市区三级联动比较常见,但是不慌,微信小程序自带的picker组件有个level属性,可以选择层级
但是,很遗憾,这个属性不生效,有好事去社区提问,官方回答是
不得已,小编只能自己实现省市二级联动了
注意这里获取的地址数据,是由请求后端接口获取的
获取的数据格式是这样的
并且需要对获取的数据进行处理
//dataArr后端请求回来的地址数据
let arr = [],
provId
Object.keys(dataArr).forEach(o => {
arr.push(dataArr[o].name)
// 省的初始值
this.multiArray[0].push(dataArr[o].name)
if (dataArr[o].name == this.province) {
provId = dataArr[o].cityList[0].provId
}
})
this.allCityGroup = arr
this.cityGroup = dataArr
for (var i = 0; i < dataArr[0].cityList.length; i++) {
// 市的初始值
this.multiArray[1].push(dataArr[0].cityList[i].name)
}
附上html代码
<view class="parent">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
请选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
</view>
js代码
// 省市全部选择完
bindMultiPickerChange(e) {
//处理数据
//获取所有的市
let cityList = this.cityGroup[e.detail.value[0]].cityList
let list = []
for (var i = 0; i < cityList.length; i++) {
list.push(cityList[i].name)
}
this.multiArray[1] = list //当前省份的市
this.multiIndex[0] = e.detail.value[0]
this.multiIndex[1] = e.detail.value[1]
this.province = this.multiArray[0][this.multiIndex[0]]
this.city = this.multiArray[1][this.multiIndex[1]]
},
// 选择省or选择市
bindMultiPickerColumnChange(e) {
let that = this
switch (e.detail.column) {
case 0:
let cityList = this.cityGroup[e.detail.value].cityList
let list = []
for (var i = 0; i < cityList.length; i++) {
list.push(cityList[i].name)
}
this.multiArray[1] = list
this.multiIndex[0] = e.detail.value
this.multiIndex[1] = 0
}
},
实现效果如下
完结啦~