效果圖

實現以(yi)下功(gong)能

一、 點擊分類項，切換右邊的食品，并高亮自身 
這個實現比較簡單(dan)，給一個states數(shu)組，用于記錄每一項分(fen)類(lei)的(de)狀態，點擊設(she)為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. });

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

二、 加(jia)減(jian)按鈕  初(chu)始只有(you)一個加(jia)號(hao)  點擊加(jia)號(hao)后(hou)，相應(ying)商品(pin)數量(liang)+1，并出現減(jian)號(hao)  減(jian)至0時，減(jian)號(hao)消失，連同數量(liang)值

設計(ji)數組結構

1. cartData: {}，它(ta)的鍵是Food表的objectId，值是數量。
2. 以下是(shi)js代碼實現
3. add: function (e) {
4. // 所(suo)點(dian)商品id
5. var foodId = e.currentTarget.dataset.foodId;
6. console.log(foodId);
7. // 讀取(qu)目前購(gou)物車(che)數據
8. var cartData = that.data.cartData;
9. // 獲取當(dang)前商品(pin)數(shu)量
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文件中綁(bang)定數據如下

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

上述代(dai)碼中，通過wx:if判(pan)斷當前商(shang)品的數(shu)量是否存在，無(wu)則不顯(xian)示(shi)減號(hao)按鈕；而(er)在加(jia)號(hao)按鈕旁要顯(xian)示(shi)的數(shu)量就(jiu)(jiu)是{{cartData[item.objectId]}}；點擊事件傳遞(di)的foodId就(jiu)(jiu)是{{item.objectId}}

減法按鈕類似

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

減法(fa)(fa)與加法(fa)(fa)基本(ben)類似(si)，值得一提的是(shi)，減法(fa)(fa)要判斷非(fei)負的合(he)法(fa)(fa)性(xing)，所以將自減至零(ling)時，直(zhi)接(jie)將元(yuan)素通過delete操作移(yi)除，省去后續提交購物(wu)車(che)遍歷匯總(zong)的非(fei)零(ling)判斷的煩(fan)瑣(suo)。

Todo List  購物車(che)動畫  購物車(che)邏(luo)輯  提交數據到后端存儲