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

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

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

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

微信小程式自定義省市縣聯動元件

呀,markdown不會用啊 addresschange function event 列印出來的結果 其中indexarr指選中的省市縣分別在對應列下的索引.不過這個值沒什麼用.regionarr就是需要的結果.其中id是對應的主鍵,省市縣的記錄均儲存在資料庫裡.這樣就可以和後端互動了.需要的小夥...

微信小程式新增功能 多列模式和省市區型別

注意 其中只可放置 元件,其他節點不會顯示。picker view column僅可放置於 中,其孩子節點的高度會自動設定成與picker view的選中框的高度一致示例 年 月 日view indicator style height 50px style width 100 height 300...

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...