微信小程序外賣選購頁實現(xiàn)切換分類與數(shù)量加減功能案例
本文實例講述了微信小程序外賣選購頁實現(xiàn)切換分類與數(shù)量加減功能。分享給大家供大家參考,具體如下:
關(guān)于微信小程序外賣界面實現(xiàn)選購切換分類與數(shù)量加減功能開發(fā)步驟:
效果圖
實現(xiàn)以下功能
一、 點擊分類項,切換右邊的食品,并高亮自身
這個實現(xiàn)比較簡單,給一個states數(shù)組,用于記錄每一項分類的狀態(tài),點擊設為true,wxml渲染時三目運算判斷即可。
categoryStates = categoryStates.map(function (item, i) { if (index == i) { item = true; } else { item = false; } return item; });
相應的wxml文件
class="{{categoryStates[index] ? 'category-item-active' : ''}}"
二、 加減按鈕
初始只有一個加號
點擊加號后,相應商品數(shù)量+1,并出現(xiàn)減號
減至0時,減號消失,連同數(shù)量值
設計數(shù)組結(jié)構(gòu)
cartData: {},它的鍵是Food表的objectId,值是數(shù)量。
以下是js代碼實現(xiàn)
add: function (e) { // 所點商品id var foodId = e.currentTarget.dataset.foodId; console.log(foodId); // 讀取目前購物車數(shù)據(jù) var cartData = that.data.cartData; // 獲取當前商品數(shù)量 var foodCount = cartData[foodId] ? cartData[foodId] : 0; // 自增1后存回 cartData[foodId] = ++foodCount; // 設值到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判斷當前商品的數(shù)量是否存在,無則不顯示減號按鈕;而在加號按鈕旁要顯示的數(shù)量就是{{cartData[item.objectId]}}
;點擊事件傳遞的foodId就是{{item.objectId}}
減法按鈕類似
subtract: function (e) { // 所點商品id var foodId = e.currentTarget.dataset.foodId; // 讀取目前購物車數(shù)據(jù) var cartData = that.data.cartData; // 獲取當前商品數(shù)量 var foodCount = cartData[foodId]; // 自減1 --foodCount; // 減到零了就直接移除 if (foodCount == 0) { delete cartData[foodId] } else { cartData[foodId] = foodCount; } // 設值到data數(shù)據(jù)中 that.setData({ cartData: cartData }); }
減法與加法基本類似,值得一提的是,減法要判斷非負的合法性,所以將自減至零時,直接將元素通過delete操作移除,省去后續(xù)提交購物車遍歷匯總的非零判斷的煩瑣。
Todo List
購物車動畫
購物車邏輯
提交數(shù)據(jù)到后端存儲
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
Android中Okhttp3實現(xiàn)上傳多張圖片同時傳遞參數(shù)
本篇文章主要介紹了Android中Okhttp3實現(xiàn)上傳多張圖片同時傳遞參數(shù) ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02javascript使用eval或者new Function進行語法檢查
使用代碼來實現(xiàn)分析代碼的語法,這是一件極其痛苦的事情。簡單的解決辦法是:使用腳本引擎自己的語法檢查,比方說eval( ) 或者new Function( )。2010-10-10javascript動態(tài)創(chuàng)建鏈接的方法
這篇文章主要介紹了javascript動態(tài)創(chuàng)建鏈接的方法,涉及javascript動態(tài)操作頁面元素的技巧,需要的朋友可以參考下2015-05-05JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù),數(shù)組扁平化又稱數(shù)組降維,下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12