目前學(xué)習(xí)小程序更多的是看看能否二次封裝其它組件，利于以后能快速開(kāi)發(fā)各種小程序應(yīng)用。目前發(fā)現(xiàn)picker的selector模式只有一級(jí)下拉，那么我們是否可以通過(guò)3個(gè)picker來(lái)實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)模板的形式來(lái)引入其它頁(yè)面中呢？答案是肯定可以的。那么我的思路是這樣的：

1、使用template模板語(yǔ)法進(jìn)行封裝，數(shù)據(jù)從頁(yè)面?zhèn)魅?/p>

2、根據(jù)picker組件的語(yǔ)法，range只能是一組中文地區(qū)數(shù)組，但是我們需要每個(gè)地區(qū)的唯一碼來(lái)觸發(fā)下一級(jí)聯(lián)動(dòng)數(shù)據(jù)。這樣，我的做法是通過(guò)一個(gè)對(duì)象里面的兩組數(shù)據(jù)分表存儲(chǔ)中文名和唯一碼的兩個(gè)對(duì)象數(shù)組。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】，這個(gè)格式是固定的，需要服務(wù)端配合返回

3、通過(guò)picker的bindchange事件來(lái)獲取下一級(jí)的數(shù)據(jù)，每個(gè)方法都寫(xiě)入函數(shù)中在暴露出來(lái)供頁(yè)面調(diào)用

然后講下我demo的目錄結(jié)構(gòu)：

common

    -net.js//wx.request請(qǐng)求接口二次整合

    -cityTemplate.js//三級(jí)聯(lián)動(dòng)方法

page

    -demo

        -demo.js

        -demo.wxml

template

    -cityTemplate.wxml

app.js

app.json

app.wxss

然后，使用phpstudy搭建了簡(jiǎn)單的服務(wù)端供測(cè)試。不要問(wèn)我服務(wù)端的為啥是這樣的，我也不懂，剛?cè)腴T我只要數(shù)據(jù)...

當(dāng)然你可以省掉這一步，將數(shù)據(jù)直接固定在demo.js里面進(jìn)行測(cè)試...

代碼如下：【服務(wù)端的返回?cái)?shù)據(jù)格式是遵循了下面的retArr的規(guī)范的】