微信小程序省市區聯動，自定義地區字典

　　

 

　　最近在做一個項目的時候遇到了這么一個問題，就是省市區的聯動呢，我們需要自定義字典來設置，那么微信小程序自帶的省市區選擇就不能用了，經過三根煙的催化，終於寫出來了。下面獻上代碼示例。

　　首先是在utils文件夾存入arealist.js文件，內容為：

const areaList=[
  {
    name:'河南',
    id:1,
    parentId:0
  },{
    name:'浙江',
    id:2,
    parentId:0
  },{
    name:'鄭州',
    id:3,
    parentId:1
  },{
    name:'新鄉',
    id:4,
    parentId:1
  },{
    name:'洛陽',
    id:5,
    parentId:1
  },{
    name:'二七區',
    id:6,
    parentId:3
  },{
    name:'金水區',
    id:7,
    parentId:3
  },{
    name:'高新區',
    id:8,
    parentId:3
  },{
    name:'中原區',
    id:9,
    parentId:3
  },{
    name:'封丘縣',
    id:10,
    parentId:4
  },{
    name:'原陽縣',
    id:11,
    parentId:4
  },{
    name:"延津縣",
    id:12,
    parentId:4
  },{
    name:'獲嘉縣',
    id:13,
    parentId:4
  },{
    name:'孟津縣',
    id:14,
    parentId:5
  },{
    name:'新安縣',
    id:15,
    parentId:5
  },{
    name:'杭州市',
    id:16,
    parentId:2
  },{
    name:'台州市',
    id:17,
    parentId:2
  },{
    name:'西湖區',
    id:18,
    parentId:16
  },{
    name:'濱江區',
    id:19,
    parentId:16
  },{
    name:'余杭區',
    id:20,
    parentId:16
  },{
    name:'椒江區',
    id:21,
    parentId:17
  },{
    name:'黃岩區',
    id:22,
    parentId:17
  }
];
module.exports = areaList;

　　然后在需要的頁面引入地區字典，並且在onLoad的時候解析字典，遍歷出一級數據，留備后用。

const areaList=require('../../utils/arealist.js');
Page({
  data: {
    multiArray: [],
    multiIndex: [0, 0, 0],
    province:[]
  },
  bindMultiPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    const provinceName=data.multiArray[0][data.multiIndex[0]];
    let provinceId="";
    let province = this.data.province;
    let quyuList = [], cityList = [], provinceList=[],city=[],area=[];
    try {
      province.forEach(item => {
        if (item.name === provinceName) {
          provinceId = item.id;
          throw (new Error('find item'))
        }
      })
    } catch (err) {
    }
    city = areaList.filter(item => {
      return item.parentId == provinceId;
    })
    if (e.detail.column==0){
      data.multiIndex=[e.detail.value,0,0];
      try{
        area = areaList.filter(item => {
          return item.parentId == city[data.multiIndex[1]].id;
        })
      }catch(err){}
    } else if (e.detail.column == 1){
      data.multiIndex[2]=0;
      area = areaList.filter(item => {
        return item.parentId == city[e.detail.value].id;
      })
    }else{
      const cityName = data.multiArray[1][data.multiIndex[1]];
      let cityId='';
      try{
        areaList.forEach(item=>{
          if(item.name===cityName){
            cityId=item.id;
            throw(new Error('find item'));
          }
        })
      }catch(err){}
      area=areaList.filter(item=>{
        return item.parentId==cityId;
      })
    }
    provinceList = province.map(item => {
      return item.name
    })
    cityList = city.map(item => {
      return item.name;
    })
    quyuList = area.map(item => {
      return item.name;
    })
    data.multiArray= [provinceList, cityList, quyuList],
    this.setData(data);
  },
  onLoad(){
    var province = [], city = [], area = [];
    province=areaList.filter(item => {
      return item.parentId == 0;
    })
    city = areaList.filter(item => {
      return item.parentId == province[0].id;
    })
    area = areaList.filter(item => {
      return item.parentId == city[0].id;
    })
    var provinceList = province.map(item => {
      return item.name
    })
    var cityList = city.map(item => {
      return item.name;
    })
    var quyuList = area.map(item => {
      return item.name;
    })
    this.setData({
      multiArray: [provinceList, cityList, quyuList],
      province
    })
  }
})

　　下面是wxml頁面，想要看一下效果的可以直接貼去看下

<view class="section">
  <view class="section__title">多列選擇器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>

 　　提示：在微信開發者工具中會出現一級目錄選項改變二級目錄的選項沒有把index回置為0的問題，但是在真機調試的時候並未發現此問題。暫未找到相關解釋