微信小程序——購物車結算
阿新 • • 發佈：2019-01-18
ram 微信 數量 ted 正在 購物車結算 .html 產品 操作
項目需要做個購物車結算功能，先分析需求：
1.全選，反選的功能。當選中的個數 = 購物車的數量時，勾選全選按鈕，反之則取消選中全選按鈕；
2.改變選中狀態時，計算總價和總數量；
3.單個產品的數量加減；
4.列表某項選中時，如果數量改變，總價和總數量相應改變。
一些說明：
復選框默認用的小程序的checkbox組件。
為了正在看這篇文章的你更好的理解，我把設置的data截圖展示出來：
解決步驟：
1.後臺獲取購物車列表的時候，默認給它添加一個selected屬性，設置為false，並把這個值賦值給列表的checkbox的checked。如下圖：
wxml截圖：
2.對購物車列表進行操作的時候，需要3個操作：
- 計算總價和總數量；
- 當前選中狀態的改變；
- 是實時判斷它選中的個數，用來判斷是否勾選全選。
2.1. 計算總價，總數量，改變選中狀態主要代碼截圖如下：
2.2. 判斷是不是全部選中，我們可以利用 checkbox-group的返回值，如果返回值數組的個數 = 購物車列表的長度，就勾選全選按鈕。
js截圖：
註意：這個checkboxChange是綁定在 <checkbox-group>組件上的，別綁定到<checkbox>上面去了。
全選的wxml截圖：
2.3 全選，全不選
代碼裏面有註釋，這塊理解起來應該很容易了。
2.4 產品選中時，數量改變，總價和總數量相應改變。
+，-按鈕的wxml截圖：
js截圖：
總價，總數量的wxml截圖：
上面截圖對應下面的區域：
到這裏所有的功能實現已經講述完畢。這篇文章講的是一個實現的思路，所以都是截圖。對於文中這些功能的實現，如果你有更簡單的方法，或者對於我的代碼你有更好的建議，望不吝賜教~
微信小程序——購物車結算