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


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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
js常见遍历操作小结
Jun 06 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
怎么理解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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
js实现图片360度旋转
2017/01/22 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python修改文件内容的3种方法详解
2019/11/15 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
什么样的创业计划书可行性高?
2014/02/01 职场文书
新教师工作感言
2014/02/16 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
项目转让协议书
2014/10/27 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
python和anaconda的区别
2022/05/06 Python