支付宝小程序实现省市区三级联动


Posted in Javascript onJune 21, 2020

本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码,供大家参考,具体内容如下

背景

最近做的项目 有省市区联动。不仅要传name还要把对应的id发给后台。
支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求。
picker 组件不支持多列选择,所以使用 picker-view 组件和Popup配合使用。

实现效果图

支付宝小程序实现省市区三级联动

支付宝小程序实现省市区三级联动

数据结构
citys - 城市 areas - 区

当然这是处理之后的,行政区划树 不长这样子。

[{
 code:1,
 name:'北京',
 areas:[
  {
  code: 101,
  name:'朝阳区'
  },
  {
  code: 101,
  name:'丰台区'
  }
 ]
 },{
 code:2,
 name:'河北省',
 citys:[
  {
  code: 20,
  name:'石家庄市',
  areas:[{
   code:'201',
   name:'长安区'
  }]
  }
 ]
 }]

详细实现 仅供参考

//ahtml
<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" className="cityPop">
 <view class="flex">
 <view onTap="onPopupClose">取消</view>
 <view onTap="bindMultiPickerChange" class="confrim">确定</view>
 </view>
 <view>
  <picker-view value="{{multiIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker">
  <block a:for="{{multiArray}}">
   <picker-view-column key="{{index}}">
   <block a:for="{{item}}" a:for-item="colItem">
    <view key="{{colItem.code}}">{{colItem.name}}</view>
   </block>
   </picker-view-column>
  </block>
 </view>
 </popup>
// 滚动选择 
bindMultiPickerColumnChange(e) {
 // 注意处理直辖市自治区(nodeType =2 -- citys(null) areas(Array))与其他省份(nodeType=1 -- citys(Array) areas(Array))
 let newColums = e.detail.value;
 let {
  multiIndex
 } = this.data;
 let newMultiIndex=[]
 if(multiIndex[0]!=newColums[0]) {
  newMultiIndex=[newColums[0], 0, 0]
  }else {
  newMultiIndex=[multiIndex[0], newColums[1],newColums[2]|| 0]
  };
 console.log('修改的列为', newMultiIndex);
 var data = {
  multiArray: this.data.multiArray,
  multiIndex: newMultiIndex
 };
 var data.multiArray[0] = this.data.provinces;
 if ((temp[data.multiIndex[0]].citys) && (temp[data.multiIndex[0]].citys).length > 0) {
  //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
  data.multiArray[1] = temp[data.multiIndex[0]].citys || [];
  var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]) && (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas || [];
  //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值;否则赋值为空数组
  data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
 } else {
  //如果第二列“市”的个数不大于0,那么第二列“市”和第三列“区”都赋值为空数组
  //直辖市citys = null,直接赋值areas
  data.multiArray[1] = [];
  data.multiArray[2] = temp[data.multiIndex[0]].areas || [];
 }
 this.setData({
  multiArray: data.multiArray,
  multiIndex: data.multiIndex,
 });
 }
// 点击确定时 修改显示
bindMultiPickerChange: function(e) {
 let {
  multiArray,multiIndex
 } = this.data;
 let provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId;
 provinceName = multiArray[0][multiIndex[0]].name;
 cityName = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].name : '';
 districtName = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].name : '';
 provinceId = multiArray[0][multiIndex[0]].code;
 cityId = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].code : '';
 districtId = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].code : '';
 this.setData({
  provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId,
  region: provinceName + cityName + districtName,
  showBottom:false
 })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
微信小程序实现canvas分享朋友圈海报
Jun 21 #Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 #Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
You might like
ini_set的用法介绍
2014/01/07 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
js初始化验证实例详解
2016/11/26 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
Vue异步加载about组件
2017/10/31 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
对python中dict和json的区别详解
2018/12/18 Python
python按照多个条件排序的方法
2019/02/08 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python 杀死自身进程的实现方法
2019/07/01 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python ETL工具 pyetl
2020/06/07 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
关于旷工的检讨书
2014/02/02 职场文书
难忘的一课教学反思
2014/04/30 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
培训通知书模板
2015/04/17 职场文书
千与千寻观后感
2015/06/04 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
创业计划书详解
2019/07/19 职场文书
Python字符串的转义字符
2022/04/07 Python