热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要为大家详细介绍了支付宝小程序实现省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的

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

背景

最近做的项目 有省市区联动。不仅要传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

 
 取消
 确定
 
 
  
  
   
   
    {{colItem.name}}
   
   
  
 
 
// 滚动选择 
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
 })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程笔记。

原文链接:https://blog.csdn.net/Y_G_G/article/details/100773525


推荐阅读
  • layui表格分页不生效怎么办
    web前端|Layui教程layuiweb前端-Layui教程小程序实例源码,ubuntuip切换,tomcat默认端改为80,爬虫完整源码,微信小程序php接口,seo专业培训班 ... [详细]
  • java程序设计试题_《Java语言程序设计》期末考试模拟试题——填空题和编程题...
    一、根据题意,填写出空格中的内容Java平台包括三个技术方向,其中J2ME代表____________、J2SE代表___________、J2EE代表 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • 使用eclipse创建一个Java项目的步骤
    本文介绍了使用eclipse创建一个Java项目的步骤,包括启动eclipse、选择New Project命令、在对话框中输入项目名称等。同时还介绍了Java Settings对话框中的一些选项,以及如何修改Java程序的输出目录。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
  • 项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到 ... [详细]
  • 这篇文章主要讲解了“如何应对Android面试”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何应对 ... [详细]
  • 网络编程:其实就是在学socketsocket是什么?翻译过来称为套接字是对底层的TCPIPUDP等网络协议进行封装使得上层的应用程序开发者,不用直接接触这对复杂,丑陋的协议在程序 ... [详细]
author-avatar
坏尐骇MB_549
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有