演示微信小程序地區(qū)選擇偽五級(jí)聯(lián)動(dòng)

3403771864 發(fā)布于2022-11-08 23:27 / 389人閱讀

　　在項(xiàng)目中，要求微信小程序的地區(qū)可以選擇偽五級(jí)聯(lián)動(dòng)

　　展示如下

　　這里采用的是自定義多列選擇器picker mode="multiSelector"

　　<view class="section">
　　<view class="section__title">多列選擇器</view>
　　<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
　　<view wx:if="{{multiIndex[0]==0}}" class="picker" style='font-size:24rpx'>
　　當(dāng)前選擇：全國(guó)
　　</view>
　　<view wx:elif="{{multiIndex[1]==0}}" class="picker" style='font-size:24rpx'>
　　當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}
　　</view>
　　<view wx:elif="{{multiIndex[2]==0}}" class="picker" style='font-size:24rpx'>
　　當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
　　</view>
　　<view wx:elif="{{multiIndex[3]==0}}" class="picker" style='font-size:24rpx'>
　　當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
　　</view>
　　<view wx:else class="picker" style='font-size:24rpx'>
　　當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}-{{multiArray[3][multiIndex[3]]}}
　　</view>
　　</picker>
　　</view>

　　multiArray包含4個(gè)數(shù)組（省市縣鎮(zhèn)），multiIndex是4個(gè)數(shù)組對(duì)應(yīng)選中下標(biāo)

　　onLoad: async function (options) {
　　let chinaData = await getCountryList()
　　chinaData.unshift({city: [],code: 0,name: "全部"})
　　for(let one of chinaData){
　　one.city.unshift({county: [],code: 0,name: "全部"})
　　for(let two of one.city){
　　two.county.unshift({code: 0,name: "全部"})
　　}
　　}
　　this.data.chinaData = chinaData;
　　let sheng = []; // 設(shè)置省數(shù)組
　　for(let i = 0; i < chinaData.length; i++) {
　　sheng.push(chinaData[i].name);
　　}
　　this.setData({
　　"multiArray[0]": sheng
　　})
　　this.getCity(); // 得到市
　　},
　　bindMultiPickerChange: function(e) {
　　console.log(e);
　　},
　　bindMultiPickerColumnChange: function(e) {
　　let move = e.detail;
　　let index = move.column;
　　let value = move.value;
　　if (index == 0) {
　　this.setData({
　　multiIndex: [value,0,0,0]
　　})
　　this.getCity();
　　}
　　if (index == 1) {
　　this.setData({
　　"multiIndex[1]": value,
　　"multiIndex[2]": 0,
　　"multiIndex[3]": 0
　　})
　　this.getXian();
　　}
　　if (index == 2) {
　　this.setData({
　　"multiIndex[2]": value,
　　"multiIndex[3]": 0,
　　})
　　this.getZhen();
　　}
　　if (index == 3) {
　　this.setData({
　　"multiIndex[3]": value
　　})
　　this.getZhen();
　　}
　　},
　　getCity: function() { // 得到市
　　let shengNum = this.data.multiIndex[0];
　　let chinaData = this.data.chinaData;
　　let cityData = chinaData[shengNum].city;
　　let city = [];
　　for (let i = 0; i < cityData.length; i++) {
　　city.push(cityData[i].name)
　　}
　　this.setData({
　　"multiArray[1]": city
　　})
　　this.getXian();
　　},
　　getXian: function(e) { // 得到縣
　　let shengNum = this.data.multiIndex[0];
　　let cityNum = this.data.multiIndex[1];
　　let chinaData = this.data.chinaData;
　　let xianData = chinaData[shengNum].city[cityNum].county;
　　let xian = [];
　　for (let i = 0; i < xianData.length; i++) {
　　xian.push(xianData[i].name)
　　}
　　this.setData({
　　"multiArray[2]": xian
　　})
　　this.getZhen();
　　},
　　async getZhen(){// 得到鎮(zhèn)
　　let shengNum = this.data.multiIndex[0];
　　let cityNum = this.data.multiIndex[1];
　　let xianNum = this.data.multiIndex[2];
　　let chinaData = this.data.chinaData;
　　let zhen = [];
　　if(chinaData[shengNum].city[cityNum].county[xianNum].code == 0){
　　this.setData({
　　"multiArray[3]" : ["全部"]
　　})
　　}else{
　　//這里需要傳縣的code值獲取鎮(zhèn)的數(shù)據(jù)
　　let res = await getTownByCounty(chinaData[shengNum].city[cityNum].county[xianNum].code)
　　let zhenData = JSON.parse(res.data.data.json)
　　zhenData.unshift({code: 0,name: "全部"})
　　for (let i = 0; i < zhenData.length; i++) {
　　zhen.push(zhenData[i].name)
　　}
　　this.setData({
　　"multiArray[3]" : zhen
　　})
　　}
　　}

　　省市縣數(shù)據(jù)返回類(lèi)型