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


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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
小程序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 归并排序 数组交集
2011/05/10 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Python简易版图书管理系统
2019/08/12 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
考博自荐信
2013/10/25 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
生日宴会答谢词
2014/01/09 职场文书
运动会入场词100字
2014/02/06 职场文书
中学教师自我鉴定
2014/02/07 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
应届毕业生求职信
2014/05/26 职场文书
英语分层教学实施方案
2014/06/15 职场文书
个人更名证明
2015/06/23 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技