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