微信小程序——購物車結算

 項目須要作個購物車結算功能，先分析需求：

1.全選，反選的功能。當選中的個數 = 購物車的數量時，勾選全選按鈕，反之則取消選中全選按鈕；

2.改變選中狀態時，計算總價和總數量；

3.單個產品的數量加減；

4.列表某項選中時，若是數量改變，總價和總數量相應改變。

 

一些說明：

複選框默認用的小程序的checkbox組件。

爲了正在看這篇文章的你更好的理解，我把設置的data截圖展現出來：

 

解決步驟：

1.後臺獲取購物車列表的時候，默認給它添加一個selected屬性，設置爲false，並把這個值賦值給列表的checkbox的checked。以下圖：

 

wxml截圖：

 

2.對購物車列表進行操做的時候，須要3個操做：

1. 計算總價和總數量；
2. 當前選中狀態的改變；
3. 是實時判斷它選中的個數，用來判斷是否勾選全選。

 

2.1. 計算總價，總數量，改變選中狀態主要代碼截圖以下：

 

 2.2. 判斷是否是所有選中，咱們能夠利用 checkbox-group的返回值，若是返回值數組的個數 = 購物車列表的長度，就勾選全選按鈕。

js截圖：

 注意：這個checkboxChange是綁定在 <checkbox-group>組件上的，別綁定到<checkbox>上面去了。

 

 全選的wxml截圖：

 

 2.3 全選，全不選

代碼裏面有註釋，這塊理解起來應該很容易了。

 

2.4 產品選中時，數量改變，總價和總數量相應改變。

+，-按鈕的wxml截圖：

 

js截圖：

 

 

總價，總數量的wxml截圖：

 

上面截圖對應下面的區域：

 

到這裏全部的功能實現已經講述完畢。這篇文章講的是一個實現的思路，因此都是截圖。對於文中這些功能的實現，若是你有更簡單的方法，或者對於個人代碼你有更好的建議，望不吝賜教~