本文例項為大家分享了微信小程式實現購物車功能的具體程式碼，供大家參考，具體內容如下

1、購物車介面功能實現

先來弄清楚購物車的需求。

• 單選、全選和取消，而且會隨著選中的商品計算出總價
• 單個商品購買數量的增加和減少
• 刪除商品。當購物車為空時，頁面會變為空購物車的佈局
  

根據設計圖，我們可以先實現靜態頁面。接下來，再看看一個購物車需要什麼樣的資料。

首先是一個商品列表(carts)，列表裡的單品需要：商品圖(image)，商品名(title)，單價(price)，數量(num)，是否選中(selected)，商品id(id)
然後左下角的全選，需要一個欄位(selectAllStatus)表示是否全選了右下角的總價(totalPrice)最後需要知道購物車是否為空(hasList)

2、下面是程式碼

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"/></navigator>
    <text class="cart-pro-name">{{item.title}}</text>
    <text class="cart-pro-price">￥{{item.price}}</text>
    <view class="cart-count-box">
     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
     <text class="cart-count-num">{{item.num}}</text>
     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
    </view>
     <text class="cart-del" bindtap="deleteList" data-index="{{index}}">x</text>
   </view>
  </view>
   
   <view class="cart-footer">
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"></icon>
    <view class="order-icon">
     <navigator url="../orders/orders"><image src="/image/icon3.png" /></navigator>
    </view>
    <text>全選</text>
    <text class="cart-total-price">￥{{totalPrice}}</text>
   </view> 
 </view>
 <view wx:else>
  <view class="cart-no-data">購物車是空的哦</view>
 </view> 
</view>

js:

// page/component/cart/cart.js
Page({

 /**
 * 頁面的初始資料
 */
 data: {
  carts: [],//購物車列表
  hasList: false,//列表是否有資料
  totalPrice: 0,// 總價 初始為0 
  selectAllStatus: true,// 全選狀態 預設全選
  obj: {
  name: "hello"
  }
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function (options) {

 },/**
 * 生命週期函式--監聽頁面初次渲染完成
 */
 onReady: function () {

 },/**
 * 生命週期函式--監聽頁面顯示
 */
 onShow: function () {
  this.setData({
   hasList: true,// 含有資料 設為true 
   carts: [
   {id: 1,title: '新鮮芹菜 半斤',image:'/image/s5.png',num:4,price: 0.01,seclected:true},{id: 2,title: '素米 500g',image: '/image/s6.png',num: 1,price: 0.03,seclected:true}
   ]
  });
  this.getTotalPrice();
 },// 當前商品選中事件
 selectList(e) {
 const index = e.currentTarget.dataset.index; //獲取 data 傳進來的index
 let carts = this.data.carts;   // 獲取購物車列表
 const seclected = carts[index].seclected; //獲取當前商品的選中狀態
 carts[index].seclected = !seclected; // 改變狀態
 this.setData({
  carts: carts
 });
 this.getTotalPrice();      //重新獲取總價
 },// 刪除購物車當前商品
deleteList(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 carts.splice(index,1);     // 刪除購物車列表裡這個商品
 this.setData({
 carts: carts
 });
 if (!carts.length) {     // 如果購物車為空
 this.setData({
  hasList: false     // 修改標識為false 顯示購物車為空頁面
 });
 } else {        // 如果不為空 
 this.getTotalPrice();    // 重新計算總價格
 }
},// 購物車全選事件

selectAll(e) {
 let selectAllStatus = this.data.selectAllStatus; // 是否全選狀態
 selectAllStatus = !selectAllStatus;
 let carts = this.data.carts;

 for (let i = 0; i < carts.length; i++) {
  carts[i].selected = selectAllStatus;
 }           // 改變所有商品狀態
 this.setData({
  selectAllStatus: selectAllStatus,carts: carts
 });
 this.getTotalPrice();  //重新獲取總價
},// 繫結加數量事件
addCount(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 let num = carts[index].num;
 num = num + 1;
 carts[index].num = num;
 this.setData({
 carts: carts
 });
 this.getTotalPrice();
},// 繫結減數量事件
minusCount(e) {
 const index = e.currentTarget.dataset.index;
 const obj = e.currentTarget.dataset.obj;
 let carts = this.data.carts;
 let num = carts[index].num;
 if (num <= 1) {
  return false;
 }
 num = num - 1;
 carts[index].num = num;
 this.setData({
  carts: carts
 });
 this.getTotalPrice();
},// 計算總價
getTotalPrice() {
  let carts = this.data.carts; // 獲取購物車列表
  let total = 0;  
  for (let i = 0; i < carts.length; i ++) { // 迴圈列表得到每個資料
   if (carts[i].selected) { // 判斷選中才會計算價格
   total += carts[i].num * carts[i].price; // 所有價格加起來
   }
  }
  this.setData({       // 最後賦值到data 中渲染到頁面
  carts: carts,totalPrice: total.toFixed(2)
  });
},/**
 * 生命週期函式--監聽頁面隱藏
 */
 onHide: function () {

 },/**
 * 生命週期函式--監聽頁面解除安裝
 */
 onUnload: function () {

 },/**
 * 頁面相關事件處理函式--監聽使用者下拉動作
 */
 onPullDownRefresh: function () {

 },/**
 * 頁面上拉觸底事件的處理函式
 */
 onReachBottom: function () {

 },/**
 * 使用者點選右上角分享
 */
 onShareAppMessage: function () {

 }
})

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。