本文實例講述了微信小程序外賣選購頁實現(xiàn)切換分類與數(shù)量加減功能。分享給大家供大家參考，具體如下：
關(guān)于微信小程序外賣界面實現(xiàn)選購切換分類與數(shù)量加減功能開發(fā)步驟：
效果圖
實現(xiàn)以下功能
一、 點擊分類項，切換右邊的食品，并高亮自身
這個實現(xiàn)比較簡單，給一個states數(shù)組，用于記錄每一項分類的狀態(tài)，點擊設(shè)為true，wxml渲染時三目運(yùn)算判斷即可。
categoryStates = categoryStates.map(function (item, i) {if (index == i) {item = true;} else {item = false;}return item;});相應(yīng)的wxml文件
class="{{categoryStates[index] ? 'category-item-active' : ''}}"二、 加減按鈕
初始只有一個加號
點擊加號后，相應(yīng)商品數(shù)量+1，并出現(xiàn)減號
減至0時，減號消失，連同數(shù)量值
設(shè)計數(shù)組結(jié)構(gòu)
cartData: {}，它的鍵是Food表的objectId，值是數(shù)量。
以下是js代碼實現(xiàn)
add: function (e) {// 所點商品idvar foodId = e.currentTarget.dataset.foodId;console.log(foodId);// 讀取目前購物車數(shù)據(jù)var cartData = that.data.cartData;// 獲取當(dāng)前商品數(shù)量var foodCount = cartData[foodId] ? cartData[foodId] : 0;// 自增1后存回cartData[foodId] = ++foodCount;// 設(shè)值到data數(shù)據(jù)中that.setData({cartData: cartData});}在wxml文件中綁定數(shù)據(jù)如下
<view class="stepper"><!-- 減號 --><view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view><!-- 數(shù)量 --><view class="value">{{cartData[item.objectId]}}</view><!-- 加號 --><view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view></view>上述代碼中，通過wx:if判斷當(dāng)前商品的數(shù)量是否存在，無則不顯示減號按鈕；而在加號按鈕旁要顯示的數(shù)量就是{{cartData[item.objectId]}}；點擊事件傳遞的foodId就是{{item.objectId}}
減法按鈕類似
subtract: function (e) {// 所點商品idvar foodId = e.currentTarget.dataset.foodId;// 讀取目前購物車數(shù)據(jù)var cartData = that.data.cartData;// 獲取當(dāng)前商品數(shù)量var foodCount = cartData[foodId];// 自減1--foodCount;// 減到零了就直接移除if (foodCount == 0) {delete cartData[foodId]} else {cartData[foodId] = foodCount;}// 設(shè)值到data數(shù)據(jù)中that.setData({cartData: cartData});}減法與加法基本類似，值得一提的是，減法要判斷非負(fù)的合法性，所以將自減至零時，直接將元素通過delete操作移除，省去后續(xù)提交購物車遍歷匯總的非零判斷的煩瑣。
Todo List
購物車動畫
購物車邏輯
提交數(shù)據(jù)到后端存儲
希望本文所述對大家微信小程序開發(fā)有所幫助。
新聞熱點
疑難解答
