搜尋
首頁微信小程式小程式開發微信小程式中購物車的簡單實例

微信小程式中購物車的簡單實例

不言
不言
Jun 22, 2018 pm 04:04 PM
微信小程式購物車購物車實現

這篇文章主要介紹了微信小程序購物車簡單實例的相關資料,需要的朋友可以參考下

微信小程序，這裡實現購物車功能的小demo,有需要此功能的朋友可以參考下。

摘要: 加減商品數量，匯總價格，全選與全不選

#設計思路：

##一、從網絡上傳入以下Json資料格式的陣列1.購物車id：cid 2.標題title 3.數量num 4.圖片地址5.價格price 6.小計7.是否選取selected

#二、點選復選框toggle操作如已經選中的，經點擊變成未選中，反之而反之點擊依據index作為標識，而不用cid，方便遍歷

三、全選操作首次點擊即為全部選中，再次點擊為全不選，全選按鈕本身也跟隨toggle變換

四、點擊結算按鈕，將已選中的cid數組取出，以供通過網絡提交到服務端，這裡給個toast作為結果演示。

五、利用stepper作加減運算，同樣依據index作為標識，點完寫回num值。

六、佈局，全選與結算按鈕底部對齊，購物車商城自適應高度，類似Android的weight。

步驟：

初始資料渲染


#1.1 佈局與樣式表

上方是商品列表，下方是一個全選按鈕與立即結算按鈕

商品列表左部為商品縮圖，右上為商品標題，右下為商品價格與數量，其中商品數量使用WXStepper來實現加減操作

#js：初始化一個資料來源，這往往是從網路取得的，相關介面可參考：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

佈局檔

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

樣式表

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}


1.2 整合WXStepper

1.2.1 複製元件內容

[2016-10-16]

將stepper.wxss的內容複製到cart.wxss

將stepper.wxml的內容複製到cart.wxml中

與之前的單一元件不同的是：這裡要定義數組minusStatuses來與每一個加減按鈕對應。當然，合併入carts也是沒問題的。

        minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']


原來的靜態字元WXStepper換成以下的程式碼

 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js程式碼bindMinus、bindPlus分別改造為如下：

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

效果如圖：

[2016-10-17]

修正手動改變數量儲存到陣列

1.3 整合LXCheckboxGroup

複製佈局檔程式碼到wxml，這裡要判斷已選狀態，一般購物車勾選狀態是記錄在網路的。

index值用於傳值js，遍歷之用。 

 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

複選框居中

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

綁定點選複選框事件，對選擇狀態做反選操作。 

  bindCheckbox: function(e) {
    /*绑定点击事件，将checkbox样式改变为选中与非选中*/
    //拿到下标值，以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

效果圖：


1.4 加入全選與立即結算按鈕

1.4.1 修改佈局文件，實現上述按鈕底部對齊，使用flex與固定高度來完成。

減少為3行，看是否還在最底；此外，也要保證懸浮在底部，不被列表項目的滾動而滾動。 

 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

之前用來實現，發現無論如何都不能實現全選部件與結算按鈕分散對齊，不響應如下樣式

  display: flex;
  flex-direction: row;
  justify-content: space-between;

樣式表

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全選與全不選事件

實作bindSelectAll事件，改變全選狀態

先定義一個data值，以記錄全選狀態

selectedAllStatus: false


事件實作：

 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据，关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

1.4.3 立即結算顯示目前所選的cid，以供提交到網絡，商品數量應該是包括在cid中的，後端設計應該只關注cid與uid

佈局文件也埋一下toast，js只要改變toast的顯示與否即可。 

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

為立即結算綁定事件bindCheckout，彈出cid彈窗

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = &#39;cid:&#39;;
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += &#39; &#39;;
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 底部懸浮固定

1.5.1 商品列表.carts-list 加入margin-bottom: 80rpx; 以及修改上邊距為零，使得底部部件與分隔不重複出現，padding: 0 40rpx;

1.5.2 底部按鈕.carts-footer 加入background: white;

#1.5 .3 .carts-footer 加入

  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

1.6 總結

1.6.1 先定義一個資料來源，並在版面配置檔案中埋坑

total: ''

{{total}}

1.6.2 通用匯總函數

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: &#39;￥&#39; + total
    });
  }

然後分別在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中呼叫this.sum()

如圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

微信小程式做出外帶選單點單功能

微信小程式開發中怎樣實現電商購物車邏輯

#

以上是微信小程式中購物車的簡單實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
顯示更多

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7681
15
CakePHP 教程
1393
52
C# 教程
1209
24
steam的賬戶名稱是什麼格式
91
11
win11激活密鑰永久
73
19
顯示更多