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


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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
JAVA/JSP学习系列之二
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python实现壁纸批量下载代码实例
2018/01/25 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Django实现网页分页功能
2019/10/31 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python中pivot()函数基础知识点
2021/01/03 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
测试工程师程序员求职信范文
2014/02/20 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL