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

　　先看下功能要點：

　　1.多層級的分類選擇

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

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

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

　　這些看似很簡單，其實是也是很簡單，當(dāng)然了，當(dāng)你會了，操作了一次，自然就簡單了。今天就給大家把清晰的流程跟代碼貼上來。接下來文章可能有點長，不過建議大家一定要看完。因為看完了才會有整體的思路。

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

　　bindchange事件處理

　　value 默認(rèn)值

　　checked 默認(rèn)選中

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

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

　　我們要去到這個復(fù)選框的頁面，就是下面這種。點擊可以展開跟收起的。

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

　　思路：

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

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

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

　　然后我們來寫獲取選中的box的title。

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

　　這時候，如果選擇好了之后，從上頁面回來的話，就不知道哪個項是哪個分類里的了，所以我們在增加到this.shops數(shù)組當(dāng)中的時候增加一個分類標(biāo)識字段，用來區(qū)分分類。

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

　　到這里，我們開始提交這個值到上一個頁面去顯示出來。先給確定按鈕加個事件。

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

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

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

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

　　加載之前的緩存，

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

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

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

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

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

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

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

　　在上一個頁面銷毀的時候清緩存：(注意，最好不要用clearStorage，因為防止其它頁面也有緩存被一下清空)