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

(编辑:jimmy 日期: 2024/10/31 浏览:2)

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

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

效果图

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

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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。