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

本文实例为大家分享了微信小程序实现选择地址省市区三级联动的具体代码,供大家参考,具体内容如下

微信原生地址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>

效果图

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

时间: 2020-06-19

微信小程序 (地址选择1)--选取搜索地点并显示效果

效果:(直接复制代码,可查看效果) 可以通过拖动地图,搜索地址,选择地址,并将地址值传给文本框 进入以下界面 点击确定后. 代码如下: wxml: <view class="box2"> <view class="box2_left">收货地址</view> <input type="text" class="box2_right" placeholder="请选择收货地址&

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

国际惯例先上效果图: 省市区三级联动,选择省自动刷新市,选择市自动刷新区,点击取消自动返回上一级重新选择,点击确定,保存地址. 数据库 这份数据库是某天在网上逛到的,当时未记录出处,直接贴出给读者使用,实在不妥,此处仅贴出表结构,方便大家交流学习.如有读者了解此份数据出处,烦请留言,谢谢! 数据表结构如下: 部分使用到的字段信息: id:唯一标识每一个数据 name:地区名 parent_id:上级地区的id,若parent_id = 0 ,表示无上级信息,当前即为最高行政区. extra:主要

微信小程序在地图选择地址并返回经纬度简单示例

本文实例讲述了微信小程序在地图选择地址并返回经纬度功能.分享给大家供大家参考,具体如下: 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 wxml文件部分代码: <button bindtap="mapView" style="margin:10px">查看地图</button> js文件主要功能代码: mapView:function(){ var that = this wx.chooseLocation({ su

微信小程序 ecshop地址三级联动实现实例代码

微信小程序 ecshop地址3级联动实现实例代码 picker标签,官方给出的实例: <view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

微信小程序 使用picker封装省市区三级联动实例代码

微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法

微信小程序三级联动选择器使用方法

本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

微信小程序 可搜索的地址选择实现详解

这篇文章主要介绍了微信小程序 可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最终实现效果: 效果实现步骤 新建index文件夹 index.wxml <!--pages/index/index.wxml--> <view class='container'> <view bindtap='onChangeAddress'> <input value="{{address}}&q

微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

微信小程序封装http访问网络库实例代码

微信小程序封装http访问网络库实例代码 之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 代码如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(

微信小程序下拉框功能的实例代码

微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

微信小程序动态添加view组件的实例代码

在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

微信小程序实现图片翻转效果的实例代码

老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'> <!--正面的框 --> <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view> <!--背面的框 --> <view class='frame {{class2}}'> <im

微信小程序自定义音乐进度条的实例代码

需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend

微信小程序 定位到当前城市实现实例代码

微信小程序 定位到当前城市 首先需要申请百度地图Geocoding API Geocoding API包括地址解析和逆地址解析功能: 1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:"北京市海淀区中关村南大街27号"地址解析的结果是"lng:116.31985,lat:39.959836".同时,地理编码也支持名胜古迹.标志性建筑名称直接解析返回百度经纬度,例如:"百度大厦"地址解析的结果是"lng:116.

微信小程序 swiper组件详解及实例代码

微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx