支付宝小程序自定义地区三级联动
场景数据结构：
[{"id": 110000,"name": "北京市","children": [{"id": "110100","name": "北京市","children": [{"id": "110101","name": "东城区"}]}]
}]view
<popup show="{
{showArea}}" position="bottom" onClose="onPopupClose"><view class="pop-flex"><view onTap="onPopupClose">取消</view><view onTap="bindMultiPickerChange" class="confirm">确定</view></view><view><picker-view value="{
{areaIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker"><!-- 省 --><picker-view-column><block a:for="{
{provinceList}}"><view key="{
{item.id}}">{
{item.name}}</view></block></picker-view-column><!-- 市 --><picker-view-column><block a:for="{
{cityList}}"><view key="{
{item.id}}">{
{item.name}}</view></block></picker-view-column><!-- 县 --><picker-view-column><block a:for="{
{districtList}}"><view key="{
{item.id}}">{
{item.name}}</view></block></picker-view-column></picker-view></view>
</popup>js
data:{areaAddress: '',provinceList: [], // 省份列表cityList: [], // 市县列表districtList: [], // 区县列表areaIndex: [0, 0, 0], // 索引
},// 方法// 初始化三级地区initArea() {var self = this;// 初始化数据let initIndex = self.data.areaIndexlet provinceId, cityId, areaId, provinceName, cityName, areaNameprovinceId = areaList.data[initIndex[0]].idprovinceName = areaList.data[initIndex[0]].namecityId = areaList.data[initIndex[0]].children[initIndex[1]].idcityName = areaList.data[initIndex[0]].children[initIndex[1]].nameareaId = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].idareaName = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].name// 初始化列表数据self.setData({'form.province': provinceId,'form.city': cityId,'form.area': areaId,areaAddress: provinceName + cityName + areaName,provinceList: areaList.data,cityList: areaList.data[0].children,districtList: areaList.data[0].children[0].children})},// 选择地址——填充选择框——填充上传数据bindMultiPickerChange() {let self = thislet initIndex = self.data.areaIndexlet provinceId, cityId, areaId, provinceName, cityName, areaNameprovinceId = self.data.provinceList[initIndex[0]].idprovinceName = self.data.provinceList[initIndex[0]].namecityId = self.data.provinceList[initIndex[0]].children[initIndex[1]].idcityName = self.data.provinceList[initIndex[0]].children[initIndex[1]].nameareaId = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].idareaName = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].nameself.setData({'form.province': provinceId,'form.city': cityId,'form.area': areaId,areaAddress: provinceName + cityName + areaName,showArea: false})},// 滑动地址bindMultiPickerColumnChange(e) {let self = thislet newIndexArr = e.detail.value// 监听第一列if (newIndexArr[0] !== self.data.areaIndex[0]) {// 滑动第一列——初始化第二列和第三列的数据let initArr = [newIndexArr[0], 0, 0]self.setData({areaIndex: initArr,cityList: self.data.provinceList[initArr[0]].children,districtList: self.data.provinceList[initArr[0]].children[0].children})return}// 监听第二列滑动if (newIndexArr[1] !== self.data.areaIndex[1]) {// 滑动第一列——初始化第二列和第三列的数据let initArr = [newIndexArr[0], newIndexArr[1], 0]self.setData({areaIndex: initArr,districtList: self.data.provinceList[initArr[0]].children[initArr[1]].children})return}// 监听第三列self.setData({areaIndex: newIndexArr})}