支付宝小程序实现自定义地区三级联动

支付宝小程序自定义地区三级联动

场景数据结构：

[{"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>

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})}

支付宝小程序实现自定义地区三级联动相关推荐

支付宝小程序使用自定义组件(原生)
首先打开支付宝的小程序开发者工具,并打开你的项目选中你创建用于放置公用组件的文件,右键选择新建小程序组件. 在小程序顶部会出现一个输入框,要求你输入你要定义的组件名称. 举例:输入后回车在文件中 ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
支付宝小程序使用uView实现省市区三级联动的坑
第一次开发支付宝小程序,已经准备好坠坑了,没想到坑这么大!!! 本次使用的是uView的2.0版本,不是1.0,别问我为什么不用1.0 ,哈哈哈哈咋就喜欢用新的 ,所以坠坑就是自作自受了呜呜呜呜呜首 ...
【uniapp】省市区三级联动手机端 picker，支付宝小程序省市区
效果图 1. 支付宝小程序不兼容此方法 template <picker class="pickerList" mode="multiSelector" ...
支付宝小程序组件库开发之省市区三级地址选择器组件
支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是 ...
支付宝小程序开发练习,显示自定义二维码（四）
之前用了几种方式 1.后端生成二维码需要加密的字符窜,小程序前端利用二维码组件渲染canvas画出二维码,由于支付宝小程序没有这样的组件,于是去找微信小程序的解决方案,把微信小程序的二维码前端组件搬过 ...
支付宝小程序自定义Map地图marker
最近要做一个支付宝小程序,公司呢又不确定后面要不要做微信小程序,所以决定用uni-app开发,其中一个要求就是,地图的marker可自定义,由于设计图没出来,只是口头描述了一下... 什么样的自定义m ...
支付宝小程序自定义顶部---uniapp
有一个问题,支付宝小程序的顶部导航栏怎么可以去掉原生的呢? 看到社区回答:在对应页面的json文件中配置 "mp-alipay": {"transparentTitle& ...
ElementUI自定义组件之地区三级联动
由于家里变故和公司变动,近一年多没更新过博客了.近期稍有空暇,在此与有需要的朋友分享一个,基于Vue+ElementUI的地区三级联动组件. 先上效果图上核心代码 MbDistrictPicker ...

支付宝小程序实现自定义地区三级联动

支付宝小程序实现自定义地区三级联动相关推荐

最新文章

热门文章