快捷導(dǎo)航

支付寶小程序?qū)崿F(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

更新時(shí)間：2020年06月21日 10:01:41 作者：Y_G_G

這篇文章主要為大家詳細(xì)介紹了支付寶小程序?qū)崿F(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了支付寶小程序?qū)崿F(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

背景

最近做的項(xiàng)目有省市區(qū)聯(lián)動(dòng)。不僅要傳name還要把對(duì)應(yīng)的id發(fā)給后臺(tái)。
支付寶提供的級(jí)聯(lián)有 my.multiLevelSelect 和picker并不能滿足需求。
picker 組件不支持多列選擇，所以使用 picker-view 組件和Popup配合使用。

實(shí)現(xiàn)效果圖

數(shù)據(jù)結(jié)構(gòu)
citys - 城市 areas - 區(qū)

當(dāng)然這是處理之后的，行政區(qū)劃樹(shù) 不長(zhǎng)這樣子。

[{
 code:1,
 name:'北京',
 areas:[
  {
  code: 101,
  name:'朝陽(yáng)區(qū)'
  },
  {
  code: 101,
  name:'豐臺(tái)區(qū)'
  }
 ]
 },{
 code:2,
 name:'河北省',
 citys:[
  {
  code: 20,
  name:'石家莊市',
  areas:[{
   code:'201',
   name:'長(zhǎng)安區(qū)'
  }]
  }
 ]
 }]

詳細(xì)實(shí)現(xiàn) 僅供參考

//ahtml
<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" className="cityPop">
 <view class="flex">
 <view onTap="onPopupClose">取消</view>
 <view onTap="bindMultiPickerChange" class="confrim">確定</view>
 </view>
 <view>
  <picker-view value="{{multiIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker">
  <block a:for="{{multiArray}}">
   <picker-view-column key="{{index}}">
   <block a:for="{{item}}" a:for-item="colItem">
    <view key="{{colItem.code}}">{{colItem.name}}</view>
   </block>
   </picker-view-column>
  </block>
 </view>
 </popup>

// 滾動(dòng)選擇 
bindMultiPickerColumnChange(e) {
 // 注意處理直轄市自治區(qū)（nodeType =2 -- citys(null) areas(Array)）與其他省份(nodeType=1 -- citys(Array) areas(Array))
 let newColums = e.detail.value;
 let {
  multiIndex
 } = this.data;
 let newMultiIndex=[]
 if(multiIndex[0]!=newColums[0]) {
  newMultiIndex=[newColums[0], 0, 0]
  }else {
  newMultiIndex=[multiIndex[0], newColums[1],newColums[2]|| 0]
  };
 console.log('修改的列為', newMultiIndex);
 var data = {
  multiArray: this.data.multiArray,
  multiIndex: newMultiIndex
 };
 var data.multiArray[0] = this.data.provinces;
 if ((temp[data.multiIndex[0]].citys) && (temp[data.multiIndex[0]].citys).length > 0) {
  //如果第二列“市”的個(gè)數(shù)大于0,通過(guò)multiIndex變更multiArray[1]的值
  data.multiArray[1] = temp[data.multiIndex[0]].citys || [];
  var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]) && (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas || [];
  //如果第三列“區(qū)”的個(gè)數(shù)大于0,通過(guò)multiIndex變更multiArray[2]的值；否則賦值為空數(shù)組
  data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
 } else {
  //如果第二列“市”的個(gè)數(shù)不大于0，那么第二列“市”和第三列“區(qū)”都賦值為空數(shù)組
  //直轄市citys = null，直接賦值areas
  data.multiArray[1] = [];
  data.multiArray[2] = temp[data.multiIndex[0]].areas || [];
 }
 this.setData({
  multiArray: data.multiArray,
  multiIndex: data.multiIndex,
 });
 }

// 點(diǎn)擊確定時(shí) 修改顯示
bindMultiPickerChange: function(e) {
 let {
  multiArray,multiIndex
 } = this.data;
 let provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId;
 provinceName = multiArray[0][multiIndex[0]].name;
 cityName = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].name : '';
 districtName = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].name : '';
 provinceId = multiArray[0][multiIndex[0]].code;
 cityId = multiArray[1].length > 0 ? multiArray[1][multiIndex[1]].code : '';
 districtId = multiArray[2].length > 0 ? multiArray[2][multiIndex[2]].code : '';
 this.setData({
  provinceName,
  cityName,
  districtName,
  provinceId,
  cityId,
  districtId,
  region: provinceName + cityName + districtName,
  showBottom:false
 })
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: