微信小程序復(fù)選框的組件基本架構(gòu),微信小程序復(fù)選框開(kāi)發(fā)實(shí)例

　　2017年12月4日，hi小程序小編了解到，寫出來(lái)，也把源碼上傳了，在這里給大家講解下思路。以便大家在以后的工作中能夠拿上就用。

　　先看下功能要點(diǎn)：

　　1.多層級(jí)的分類選擇

　　2.實(shí)現(xiàn)下拉功能

　　3.選擇完后回到上一頁(yè)展示選擇的信息

　　4.點(diǎn)擊回到選擇區(qū)在復(fù)選框中顯示之前被選中的列項(xiàng)

　　這些看似很簡(jiǎn)單，其實(shí)是也是很簡(jiǎn)單，當(dāng)然了，當(dāng)你會(huì)了，操作了一次，自然就簡(jiǎn)單了。今天就給大家把清晰的流程跟代碼貼上來(lái)。接下來(lái)文章可能有點(diǎn)長(zhǎng)，不過(guò)建議大家一定要看完。因?yàn)榭赐炅瞬艜?huì)有整體的思路。

　　首先看下微信小程序開(kāi)發(fā)中的復(fù)選框的組件基本架構(gòu)，由一個(gè)checkbox-group包含著checkbox組件。然后有些屬性：

　　bindchange事件處理

　　value 默認(rèn)值

　　checked 默認(rèn)選中

　　那么要實(shí)現(xiàn)一個(gè)層級(jí)的列表多選框，我們先看下基本的數(shù)據(jù)結(jié)構(gòu)：

　　假設(shè)我們要有兩列選擇，第一列是商品選擇，第二列是食品選擇。首先我們要先寫好一個(gè)入口

　　我們要去到這個(gè)復(fù)選框的頁(yè)面，就是下面這種。點(diǎn)擊可以展開(kāi)跟收起的。

　　這個(gè)是展開(kāi)之后的樣子。那么現(xiàn)在我們要做的就是，選中多個(gè)的時(shí)候，返回到之前進(jìn)入的頁(yè)面，然后把相應(yīng)的數(shù)據(jù)帶回去顯示，并且回到這個(gè)頁(yè)面的時(shí)候上次選中的商品要被默認(rèn)選中在這里，供客戶重新增加選擇。

　　思路：

　　在點(diǎn)擊選擇框的時(shí)候，觸發(fā)就一個(gè)事件，將分類的下標(biāo)，跟當(dāng)前選中的下標(biāo)傳到方法當(dāng)中去，見(jiàn)下圖：

　　前面的是分類的下標(biāo)，后面的是當(dāng)前選中分類下面的下標(biāo)。然后我們通過(guò)checkboxChange方法來(lái)獲取到這兩個(gè)下標(biāo)。

　　接著，我們把每一次選中的值，放到事先準(zhǔn)備好的一個(gè)數(shù)組當(dāng)中去，這樣方便我們確定提交的時(shí)候統(tǒng)一返回到上一個(gè)頁(yè)面當(dāng)中去。

　　然后我們來(lái)寫獲取選中的box的title。

　　上面的就已經(jīng)寫好了選中的值會(huì)自動(dòng)增加到this.shops數(shù)組當(dāng)中去，方便提交。我們來(lái)選擇幾個(gè)打印出來(lái)看下。

　　這時(shí)候，如果選擇好了之后，從上頁(yè)面回來(lái)的話，就不知道哪個(gè)項(xiàng)是哪個(gè)分類里的了，所以我們?cè)谠黾拥絫his.shops數(shù)組當(dāng)中的時(shí)候增加一個(gè)分類標(biāo)識(shí)字段，用來(lái)區(qū)分分類。

　　我們將分類每一項(xiàng)的下標(biāo)做為區(qū)分字段的值，字段為section。并且加上選中的字段。

　　到這里，我們開(kāi)始提交這個(gè)值到上一個(gè)頁(yè)面去顯示出來(lái)。先給確定按鈕加個(gè)事件。

　　這里教大家一個(gè)可以在當(dāng)前頁(yè)面控制上一個(gè)頁(yè)面的data屬性的值方法：

　　上圖中這個(gè)方法，在navigateBack()執(zhí)行后，會(huì)改變上一實(shí)例當(dāng)中的message的值，也就是我們選中的復(fù)選框的值會(huì)加到上一頁(yè)面當(dāng)中去。這里就要注意一點(diǎn)，為了呆會(huì)回到頁(yè)面能夠把之前選中的值重新展開(kāi)顯示出來(lái)，我們要把this.shops值緩存起來(lái)。完整代碼如下圖。

　　這時(shí)候，我們回到了上一個(gè)選擇入口的頁(yè)面，我們就可以獲取到這個(gè)message的值，并且遍歷出來(lái)。也就是我們選擇好的復(fù)選框的值。

　　那么這時(shí)候，我們?cè)谶M(jìn)入到選擇頁(yè)面，要給衣服跟褲子這兩個(gè)復(fù)選框加上默認(rèn)選中的狀態(tài)，這時(shí)候就有幾個(gè)步驟，

　　加載之前的緩存，

　　操作商品數(shù)組，加上默認(rèn)選中的屬性

　　上圖加載完緩存，用section字段來(lái)判斷數(shù)據(jù)是哪個(gè)分類的，然后給一個(gè)selecteds字段來(lái)設(shè)置默認(rèn)選中，這時(shí)候checkbox屬性的checked就要設(shè)置成item.selecteds。

　　之后，我們把items重新賦值，就是我們操作完緩存之后的選中狀態(tài)完成，重新給賦值，然后遍歷出來(lái)就會(huì)出默認(rèn)選中的狀態(tài)。

　　這樣我們重新進(jìn)來(lái)的時(shí)候就是選中的狀態(tài)了，客戶可以在此基礎(chǔ)上增加跟多選。那么問(wèn)題來(lái)了，我們?cè)黾拥臅r(shí)候，會(huì)自動(dòng)增加到this.shops數(shù)組當(dāng)中去，當(dāng)我們點(diǎn)擊同樣一個(gè)復(fù)選框的時(shí)候，我們發(fā)現(xiàn)，多增加了一個(gè)，這時(shí)候應(yīng)該是要?jiǎng)h除掉。見(jiàn)如下操作

　　我們只要判斷選中的時(shí)候這個(gè)selecteds字段值是不是true，如果是的話就為false，不是則為true，這樣增加到this.shops數(shù)組中的數(shù)據(jù)就可以了。那么為false的時(shí)候，我們就要從this.shops當(dāng)中刪除這一項(xiàng)。我們只要在增加數(shù)據(jù)后，加上這段代碼就好了，意思是selecteds如果是false的，就刪除，說(shuō)明不選中了。

　　這樣一來(lái)，我們的this.shops里的數(shù)據(jù)就是完整的選擇與否的數(shù)據(jù)了。

　　這里還有個(gè)小細(xì)節(jié)問(wèn)題，在上一頁(yè)面如果沒(méi)有進(jìn)行重新選擇，而是跳到另外一個(gè)頁(yè)面的時(shí)候，我們要清除到這個(gè)key為shops的緩存，以避免下次進(jìn)來(lái)的時(shí)候還會(huì)加載之前重復(fù)的數(shù)據(jù)，會(huì)給客戶帶來(lái)不好的體驗(yàn)。所以這里要留意一下。

　　在上一個(gè)頁(yè)面銷毀的時(shí)候清緩存：(注意，最好不要用clearStorage，因?yàn)榉乐蛊渌?yè)面也有緩存被一下清空)