微信小程式省市區聯動,自定義地區字典

2022-06-23 21:03:14 字數 1888 閱讀 6576

首先是在utils資料夾存入arealist.js檔案,內容為:

const arealist=[

,,,,,,,,,,,,,,,,,,,,,

];module.exports = arealist;

view code

然後在需要的頁面引入地區字典,並且在onload的時候解析字典,遍歷出一級資料,留備後用。

const arealist=require('

../../utils/arealist.js');

page(,

bindmultipickerchange: function (e) )

},bindmultipickercolumnchange: function (e) ;

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 })

} catch

(err)

city = arealist.filter(item =>)

if (e.detail.column==0

)) }

catch

(err){}

} else

if (e.detail.column == 1

)) }

else})}

catch

(err){}

area=arealist.filter(item=>)

}provincelist = province.map(item =>)

citylist = city.map(item =>)

quyulist = area.map(item =>)

data.multiarray=[provincelist, citylist, quyulist],

this

.setdata(data);

},onload())

city = arealist.filter(item =>)

area = arealist.filter(item =>)

var provincelist = province.map(item =>)

var citylist = city.map(item =>)

var quyulist = area.map(item =>)

this

.setdata()

}})

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

class="

section

">

class="

section__title

">多列選擇器

"multiselector

" bindchange="

bindmultipickerchange

" bindcolumnchange="

bindmultipickercolumnchange

" value="

}" range="

}">

class="

picker

">當前選擇:},},}