小程序模板網(wǎng)

黃秀杰教程--靈犀外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減

發(fā)布時(shí)間:2017-12-25 11:42 所屬欄目:小程序開(kāi)發(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 ...

 
 
 

效果圖

實(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ǔ)



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18244.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢