效果圖

實(shí)現(xiàn)以下功能

一、 點(diǎn)擊分類項(xiàng)，切換右邊的食品，并高亮自身 
這個(gè)實(shí)現(xiàn)比較簡(jiǎn)單，給一個(gè)states數(shù)組，用于記錄每一項(xiàng)分類的狀態(tài)，點(diǎn)擊設(shè)為true，wxml渲染時(shí)三目運(yùn)算判斷即可。

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

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

二、 加減按鈕  初始只有一個(gè)加號(hào)  點(diǎn)擊加號(hào)后，相應(yīng)商品數(shù)量+1，并出現(xiàn)減號(hào)  減至0時(shí)，減號(hào)消失，連同數(shù)量值

設(shè)計(jì)數(shù)組結(jié)構(gòu)

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

在wxml文件中綁定數(shù)據(jù)如下

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

上述代碼中，通過(guò)wx:if判斷當(dāng)前商品的數(shù)量是否存在，無(wú)則不顯示減號(hào)按鈕；而在加號(hào)按鈕旁要顯示的數(shù)量就是{{cartData[item.objectId]}}；點(diǎn)擊事件傳遞的foodId就是{{item.objectId}}

減法按鈕類似

1. subtract: function (e) {
2. // 所點(diǎn)商品id
3. var foodId = e.currentTarget.dataset.foodId;
4. // 讀取目前購(gòu)物車數(shù)據(jù)
5. var cartData = that.data.cartData;
6. // 獲取當(dāng)前商品數(shù)量
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. // 設(shè)值到data數(shù)據(jù)中
17. that.setData({
18. cartData: cartData
19. });
20. }

減法與加法基本類似，值得一提的是，減法要判斷非負(fù)的合法性，所以將自減至零時(shí)，直接將元素通過(guò)delete操作移除，省去后續(xù)提交購(gòu)物車遍歷匯總的非零判斷的煩瑣。

Todo List  購(gòu)物車動(dòng)畫(huà)  購(gòu)物車邏輯  提交數(shù)據(jù)到后端存儲(chǔ)