微信小程序手动添加收货地址省市区联动


Posted in Javascript onMay 18, 2020

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码,供大家参考,具体内容如下

先看效果图

微信小程序手动添加收货地址省市区联动

微信小程序手动添加收货地址省市区联动

html部分

用小程序的piceker-view 嵌入页面的滚动选择器

<picker-view indicator-style="height: 50px;" style="width:100%; height: 400rpx;" bindchange="bindChange">
 <picker-view-column class="selectItem">
 <view class="tooth" wx:for="{{province}}" wx:key="this">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column class="selectItem">
 <view class="tooth" wx:for="{{city}}" wx:key="this">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column class="selectItem">
 <view class="tooth" wx:for="{{area}}" wx:key="this">{{item.name}}</view>
 </picker-view-column>
</picker-view>

js部分

这部分代码其实是因为后端同学太懒了,数据没有整理就直接返回过来了。我人微言轻的,只好自己默默地整理了。

// 把数据格式化成页面现实的形式
 formatCityData: function () {
 var that = this,
 region = that.data.region,
 selectItems = [],
 province = [],
 city = [],
 area = [],
 area_index = that.data.area_index,
 city_index = that.data.city_index,
 province_index = that.data.province_index;
 // 第一遍格式化数据,
 for (var i = 0; i < region.length; i++) {
 if (region[i].parent_id == 1) {
 var provinceItem = region[i];
 var selectItem1 = { label: provinceItem.zh_name, provinceId: provinceItem.id, children: [] };
 for (var j = 0; j < region.length; j++) {
  if (region[j].parent_id == provinceItem.id) {
  var cityItem = region[j];
  var selectItem2 = { label: cityItem.zh_name, cityId: cityItem.id, children: [] };
  selectItem1.children.push(selectItem2);
  for (var k = 0; k < region.length; k++) {
  if (region[k].parent_id == cityItem.id) {
  var areaItem = region[k];
  var selectItem3 = { label: areaItem.zh_name, areaId: areaItem.id, children: [] };
  selectItem2.children.push(selectItem3);
  }
  }
  }
 }
 selectItems.push(selectItem1);
 }
 }
 // 遍历所有的数据。将省的名字放在对应的数组中
 for (let i = 0; i < selectItems.length; i++) {
 province.push({
 name: selectItems[i].label,
 id: selectItems[i].provinceId
 });
 }
 if (selectItems[province_index].children && selectItems[province_index].children) {// 判断选中的省级里面有没有市
 if (selectItems[province_index].children[city_index]) {
 for (let i = 0; i < selectItems[province_index].children.length; i++) {
  city.push({
  name: selectItems[province_index].children[i].label,
  id: selectItems[province_index].children[i].cityId
  });
 }
 if (selectItems[province_index].children[city_index].children) {
  if (selectItems[province_index].children[city_index].children[area_index]) {
  for (let i = 0; i < selectItems[province_index].children[city_index].children.length; i++) {
  area.push({
  name: selectItems[province_index].children[city_index].children[i].label,
  id: selectItems[province_index].children[city_index].children[i].areaId
  });
  }
  } else {
  that.setData({
  area_index: 0
  });
  for (let i = 0; i < selectItems[province_index].children[city_index].childre.length; i++) {
  area.push({
  name: selectItems[province_index].children[city_index].children[i].label,
  id: selectItems[province_index].children[city_index].children[i].areaId
  });
  }
  }
 } else {
  area.push({
  name: province[province_index].children[city_index].label,
  id: province[province_index].children[city_index].areaId
  });
 }
 } else {
 that.setData({
  city_index: 0
 });
 for (let i = 0; i < selectItems[province_index].childre.length; i++) {
  city.push({
  name: selectItems[province_index].children[i].label,
  id: selectItems[province_index].children[i].cityId
  });
 }
 }
 } else {
 // 如果该省没有市,那么就把省的名字作为市和区的名字
 city.push({
 name: province[province_index].label,
 id: province[province_index].cityId
 });
 area.push({
 name: province[province_index].label,
 id: province[province_index].areaId
 });
 }
 // 选择成功后把对应的数组赋值给相应的变量
 that.setData({
 province: province,
 city: city,
 area: area
 });
 provincialCity = {
 province: {
 name: province[that.data.province_index].name,
 id: province[that.data.province_index].id,
 },
 city: {
 name: city[that.data.city_index].name,
 id: city[that.data.city_index].id
 },
 area: {
 name: area[that.data.area_index].name,
 id: area[that.data.area_index].id
 } 
 }
 },

后台返回的格式如下:

微信小程序手动添加收货地址省市区联动

微信小程序手动添加收货地址省市区联动

// 选择城市
 bindChange: function (e) {
 const val = e.detail.value;
 this.setData({
 province_index: val[0],
 city_index: val[1],
 area_index: val[2]
 });
 this.formatCityData();
 },

前面说的是新增收获地址,后面是编辑

html部分

微信小程序手动添加收货地址省市区联动

value就是用来回显之前选择的城市。

微信小程序手动添加收货地址省市区联动

把整理好的省市区分别遍历一下,把当前的id与数据中的id作对比。把相对应的数据的下标给取出来。

this.data.province.map(function(val, key) {
 if (val.id === that.data.result.province.id) {
 provinceId = key;
 }
 return provinceId;
 })
 this.setData({
 province_index: provinceId
 });
 this.formatCityData();
 this.data.city.map(function(val, key) {
 if (val.id === that.data.result.city.id) {
 cityId = key;
 }
 return cityId;
 })
 this.setData({
 city_index: cityId
 });
 this.formatCityData();
 this.data.area.map(function (val, key) {
 if (val.id === that.data.result.area.id) {
 areaId = key;
 }
 return areaId;
 })
 var lists = [provinceId, cityId, areaId];
 this.setData({ cityShow: lists });

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 #Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript检测两个数组是否相似
2015/05/19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
纯JS实现五子棋游戏
2020/05/28 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python matlibplot绘制3D图形
2018/07/02 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python实现飞机大战
2018/09/11 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python如何对XML 解析
2020/06/28 Python
python 自动识别并连接串口的实现
2021/01/19 Python
国外软件测试工程师面试题
2016/12/09 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
大学生毕业求职简历的自我评价
2013/10/24 职场文书
初中生物教学反思
2014/01/10 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
如何写求职信
2014/05/24 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL