目前學習小程序更多的是看看能否二次封裝其它組件,利于以后能快速開發(fā)各種小程序應用。目前發(fā)現(xiàn)picker的selector模式只有一級下拉,那么我們是否可以通過3個picker來實現(xiàn)三級聯(lián)動模板的形式來引入其它頁面中呢?答案是肯定可以的。那么我的思路是這樣的:
1、使用template模板語法進行封裝,數(shù)據(jù)從頁面?zhèn)魅?/p>
2、根據(jù)picker組件的語法,range只能是一組中文地區(qū)數(shù)組,但是我們需要每個地區(qū)的唯一碼來觸發(fā)下一級聯(lián)動數(shù)據(jù)。這樣,我的做法是通過一個對象里面的兩組數(shù)據(jù)分表存儲中文名和唯一碼的兩個對象數(shù)組。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】,這個格式是固定的,需要服務端配合返回
3、通過picker的bindchange事件來獲取下一級的數(shù)據(jù),每個方法都寫入函數(shù)中在暴露出來供頁面調用
然后講下我demo的目錄結構:
common
-net.js//wx.request請求接口二次整合
-cityTemplate.js//三級聯(lián)動方法
page
-demo
-demo.js
-demo.wxml
template
-cityTemplate.wxml
app.js
app.json
app.wxss
然后,使用phpstudy搭建了簡單的服務端供測試。不要問我服務端的為啥是這樣的,我也不懂,剛入門我只要數(shù)據(jù)...
當然你可以省掉這一步,將數(shù)據(jù)直接固定在demo.js里面進行測試...
代碼如下:【服務端的返回數(shù)據(jù)格式是遵循了下面的retArr的規(guī)范的】