微信小程序-外賣選購頁實現切換分類與數量加減

關於微信小程序外賣界面實現選購切換分類與數量加減功能開發步驟：

效果圖

實現如下功能

1、 點擊分類項，切換右邊的食品，並高亮自身 
這個實現比較簡單，給一個states數組，用於記錄每一項分類的狀態，點擊設爲true，wxml渲染時三目運算判斷便可。

1. categoryStates = categoryStates.map(function (item, i) {
2. if (index == i) {
3. item = true;
4. } else {
5. item = false;
6. }
7. return item;
8. });

相應的wxml文件，class="{{categoryStates[index] ? 'category-item-active' : ''}}"

2、 加減按鈕 
初始只有一個加號 
點擊加號後，相應商品數量+1，並出現減號 
減至0時，減號消失，連同數量值

設計數組結構

1. cartData: {}，它的鍵是Food表的objectId，值是數量。
2. 如下是js代碼實現
3. add: function (e) {
4. // 所點商品id
5. var foodId = e.currentTarget.dataset.foodId;
6. console.log(foodId);
7. // 讀取目前購物車數據
8. var cartData = that.data.cartData;
9. // 獲取當前商品數量
10. var foodCount = cartData[foodId] ? cartData[foodId] : 0;
11. // 自增1後存回
12. cartData[foodId] = ++foodCount;
13. // 設值到data數據中
14. that.setData({
15. cartData: cartData
16. });
17. }

在wxml文件中綁定數據以下

1. <view class="stepper">
2. <!-- 減號 -->
3. <view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view>
4. <!-- 數量 -->
5. <view class="value">{{cartData[item.objectId]}}</view>
6. <!-- 加號 -->
7. <view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view>
8. </view>

上述代碼中，經過wx:if判斷當前商品的數量是否存在，無則不顯示減號按鈕；而在加號按鈕旁要顯示的數量就是{{cartData[item.objectId]}}；點擊事件傳遞的foodId就是{{item.objectId}}

減法按鈕相似

1. subtract: function (e) {
2. // 所點商品id
3. var foodId = e.currentTarget.dataset.foodId;
4. // 讀取目前購物車數據
5. var cartData = that.data.cartData;
6. // 獲取當前商品數量
7. var foodCount = cartData[foodId];
8. // 自減1
9. --foodCount;
10. // 減到零了就直接移除
11. if (foodCount == 0) {
12. delete cartData[foodId]
13. } else {
14. cartData[foodId] = foodCount;
15. }
16. // 設值到data數據中
17. that.setData({
18. cartData: cartData
19. });
20. }

減法與加法基本相似，值得一提的是，減法要判斷非負的合法性，因此將自減至零時，直接將元素經過delete操做移除，省去後續提交購物車遍歷彙總的非零判斷的煩瑣。

Todo List  購物車動畫  購物車邏輯  提交數據到後端存儲