微信小程式實現選擇地址省市區三級聯動

阿新 • • 發佈：2020-06-24

本文例項為大家分享了微信小程式實現選擇地址省市區三級聯動的具體程式碼，供大家參考，具體內容如下

微信原生地址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],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,val[1],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,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>

效果圖

微信小程式實現選擇地址省市區三級聯動