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

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

　　先看下功能要點：

　　1.多層級的分類選擇

　　2.實現下拉功能

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

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

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

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

　　bindchange事件處理

　　value 默認值

　　checked 默認選中

　　那么要實現一個層級的列表多選框，我們先看下基本的數據結構：

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

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

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

　　思路：

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

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

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

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

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

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

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

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

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

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

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

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

　　加載之前的緩存，

　　操作商品數組，加上默認選中的屬性

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

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

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

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

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

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

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