微信小程序实现选择地址省市区三级联动


Posted in Javascript onJune 21, 2020

本文实例为大家分享了微信小程序实现选择地址省市区三级联动的具体代码,供大家参考,具体内容如下

微信原生地址API,缺少省市区code,因此自己写了一个收货地址

思路:在onload预先加载全部省和第一个省的全部市和区,加载全部会导致几秒的事件阻塞。点击选择地址弹窗后,按需加载操作,滑动省加载对应的市和第一个市对应的区,滑动市加载区,滑动区只更改区的值

onLoad: function(options) {
 var that = this;
 // 此文件为全部省以及第一个省的市和区
 var cityData = districtLoad.districtLoad;
 // 存放省 
 const provinces = [];
 // 存放市
 const citys = [];
 // 存放区
 const countys = [];
 for (let i = 0; i < cityData.length; i++) {
  provinces.push(cityData[i]);
 }
 for (let i = 0; i < cityData[0].sub.length; i++) {
  citys.push(cityData[0].sub[i])
 }
 for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
  countys.push(cityData[0].sub[0].sub[i])
 }
 that.setData({
  provinces,
  citys,
  countys
 })
 }

滑动省市区事件

bindChange: function(e) {
 var that = this;
 var val = e.detail.value
 var t = this.data.values;
 // 滑动省
 if (val[0] != t[0]) {
  const citys = [];
  const countys = [];
  // 保存市
  for (let i = 0; i < cityData[val[0]].sub.length; i++) {
  citys.push(cityData[val[0]].sub[i])
  }
  // 保存第一个市的全部区
  for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
  countys.push(cityData[val[0]].sub[0].sub[i])
  }
  // 保存
  this.setData({
  province: cityData[val[0]].name,
  city: cityData[val[0]].sub[0].name,
  citys: citys,
  countys: countys,
  values: val,
  value: [val[0], 0, 0],
  fdeliveryProvince: this.data.provinces[val[0]].code,
  fdeliveryCity: cityData[val[0]].sub[0].code,
  })
  // 防止只有省市的情况
  if (cityData[val[0]].sub[0].sub.length!=0){
  that.setData({
   county: cityData[val[0]].sub[0].sub[0].name,
   fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
  })
  }else {
  that.setData({
   county: '',
   fdeliveryArea:''
  })
  }
  return;
 }
 // 滑动市
 if (val[1] != t[1]) {
  const countys = [];
  // 保存市
  for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
  countys.push(cityData[val[0]].sub[val[1]].sub[i])
  }
  // 保存
  this.setData({
  city: this.data.citys[val[1]].name,
  countys: countys,
  values: val,
  value: [val[0], val[1], 0],
  fdeliveryCity: this.data.citys[val[1]].code,
  })
  // 防止只有省市的情况
  if (countys.length != 0) {
  that.setData({
   county: cityData[val[0]].sub[val[1]].sub[0].name,
   fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
  })
  } else {
  that.setData({
   county: '',
   fdeliveryArea: ''
  })
  }
  return;
 }
 // 滑动区
 if (val[2] != t[2]) {
  this.setData({
  county: this.data.countys[val[2]].name,
  values: val,
  fdeliveryArea: this.data.countys[val[2]].code
  })
  return;
 }
 }

html

<view class="citypicker" wx:if="{{condition}}">
 <view class="cityheader">
 <view bindtap="open" class="city-cancel">取消</view>
 <view bindtap="open" class="city-true">确定</view>
 </view>
 <picker-view indicator-style="height: 40px;" style="font-size:30rpx; width: 100%; height: 290px;" value="{{value}}" bindchange="bindChange" class="citybody">
 <picker-view-column>
  <view wx:for="{{provinces}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column>
  <view wx:for="{{citys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column>
  <view wx:for="{{countys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 </picker-view>
</view>

效果图

微信小程序实现选择地址省市区三级联动

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

Javascript 相关文章推荐
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
基于webpack 实用配置方法总结
Sep 28 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
js实现电灯开关效果
Jan 19 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
小程序表单认证布局及验证详解
Jun 19 #Javascript
小程序实现背景音乐播放和暂停
Jun 19 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
原生JS轮播图插件
2017/02/09 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python itertools模块详解
2015/05/09 Python
Python3字符串学习教程
2015/08/20 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python pygame实现2048游戏
2018/11/20 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
课外活动实习计划
2015/01/19 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
加薪通知
2015/04/25 职场文书
python实现简单的三子棋游戏
2022/04/28 Python