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

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

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

　　1.多層級的分類選擇

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

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

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

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

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

　　bindchange事件處理

　　value 默認(rèn)值

　　checked 默認(rèn)選中

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

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

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

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

　　思路：

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

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

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

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

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

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

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

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

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

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

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

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

　　加載之前的緩存，

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

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

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

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

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

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

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

　　在上一個(gè)頁面銷毀的時(shí)候清緩存：(注意，最好不要用clearStorage，因?yàn)榉乐蛊渌撁嬉灿芯彺姹灰幌虑蹇?