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


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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
JS 时间显示效果代码
Aug 23 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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 smarty的预保留变量总结
2008/12/04 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
国企干部对照检查材料
2014/08/22 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
违纪检讨书
2015/01/27 职场文书
小学体育课教学反思
2016/02/16 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js