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


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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
javascript几个易错点记录
Nov 26 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 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 Cookie的一个使用注意点
2008/11/08 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python实战教程之自动扫雷
2018/07/13 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python批量修改ssh密码的实现
2019/08/08 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
用python实现学生管理系统
2020/07/24 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
销售业务实习自我鉴定
2013/09/23 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
爱心募捐通知范文
2015/04/27 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
Python进度条的使用
2021/05/17 Python