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

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

　　首先是在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;

View Code

　　而後在須要的頁面引入地區字典，而且在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的問題，可是在真機調試的時候並未發現此問題。暫未找到相關解釋ide