快捷導(dǎo)航

微信小程序外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減功能案例

更新時(shí)間：2019年01月15日 08:42:54 作者：第九程序

這篇文章主要介紹了微信小程序外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減功能,結(jié)合具體實(shí)例形式分析了微信小程序狀態(tài)記錄、判定及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減功能。分享給大家供大家參考，具體如下：

關(guān)于微信小程序外賣界面實(shí)現(xiàn)選購(gòu)切換分類與數(shù)量加減功能開發(fā)步驟：

效果圖

實(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)算判斷即可。

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' : ''}}"

二、加減按鈕

初始只有一個(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)

cartData: {}，它的鍵是Food表的objectId，值是數(shù)量。

以下是js代碼實(shí)現(xiàn)

add: function (e) {
// 所點(diǎn)商品id
var foodId = e.currentTarget.dataset.foodId;
console.log(foodId);
// 讀取目前購(gòu)物車數(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">
<!-- 減號(hào) -->
<view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view>
<!-- 數(shù)量 -->
<view class="value">{{cartData[item.objectId]}}</view>
<!-- 加號(hào) -->
<view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view>
</view>

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

減法按鈕類似

subtract: function (e) {
// 所點(diǎn)商品id
var foodId = e.currentTarget.dataset.foodId;
// 讀取目前購(gòu)物車數(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ù)的合法性，所以將自減至零時(shí)，直接將元素通過(guò)delete操作移除，省去后續(xù)提交購(gòu)物車遍歷匯總的非零判斷的煩瑣。

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

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章: