微信小程式中購物車的簡單實例-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

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

不言

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

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中文網！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7716

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1232

Related knowledge

閒魚微信小程式正式上線 Feb 10, 2024 pm 10:39 PM

閒魚官方微信小程式悄悄上線，在小程式中可以發布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等，有用好奇閒魚微信小程式叫什麼，現在快來看一下。閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能；3、想要使用的話必要要開通微信支付才可以購買；

Java中如何實作一個簡單的購物車功能？ Nov 02, 2023 am 11:56 AM

Java中如何實作一個簡單的購物車功能？購物車是線上商店的重要功能，它允許用戶將想要購買的商品添加到購物車中，並對商品進行管理。在Java中，我們可以透過使用物件導向的方式來實作一個簡單的購物車功能。首先，我們需要定義一個商品類。此類別包含商品的名稱、價格和數量等屬性，以及對應的Getter和Setter方法。例如：publicclassProduct

微信小程式實現圖片上傳功能 Nov 21, 2023 am 09:08 AM

微信小程式實現圖片上傳功能隨著行動網路的發展，微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景，還支援開發者自訂功能，其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能，並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前，我們需要先下載並安裝微信開發者工具，並註冊成為微信開發者。同時，也需要了解微信

實戰教學：PHP與MySQL實作購物車功能詳解 Mar 15, 2024 pm 12:27 PM

實戰教學：PHP和MySQL實現購物車功能詳解購物車功能是網站開發中常見的功能之一，透過購物車使用者可以輕鬆地將想要購買的商品加入購物車，然後進行結算和付款。在這篇文章中，我們將詳細介紹如何使用PHP和MySQL實作一個簡單的購物車功能，並提供具體的程式碼範例。建立資料庫和資料表首先需要在MySQL資料庫中建立一個用來儲存商品資訊的資料表。以下是一個簡單的數據表

實作微信小程式中的下拉式選單效果 Nov 21, 2023 pm 03:03 PM

實現微信小程式中的下拉式選單效果，需要具體程式碼範例隨著行動互聯網的普及，微信小程式成為了網路開發的重要一環，越來越多的人開始關注和使用微信小程式。微信小程式的開發相比傳統的APP開發更加簡單快捷，但也需要掌握一定的開發技巧。在微信小程式的開發中，下拉式選單是一個常見的UI元件，實現了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現下拉式選單效果，並提供具

如何在MySQL中設計商城的購物車錶結構？ Oct 30, 2023 pm 02:12 PM

如何在MySQL中設計商城的購物車錶結構？隨著電子商務的快速發展，購物車已成為線上商城的重要組成部分。購物車用於保存用戶選購的商品和相關信息，為用戶提供方便快捷的購物體驗。在MySQL中設計一個合理的購物車錶結構，可以幫助開發人員有效地儲存和管理購物車資料。本文將介紹如何在MySQL中設計商城的購物車錶結構，以及提供一些具體的程式碼範例。首先，購物車表應該包含以

使用微信小程式實現輪播圖切換效果 Nov 21, 2023 pm 05:59 PM

使用微信小程式實現輪播圖切換效果微信小程式是一種輕量級的應用程序，具有簡單、高效的開發和使用特點。在微信小程式中，實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現輪播圖切換效果，並給出具體的程式碼範例。首先，在微信小程式的頁面檔案中，新增一個輪播圖元件。例如，可以使用<swiper>標籤來實現輪播圖的切換效果。在該組件中，可以透過b

實現微信小程式中的圖片濾鏡效果 Nov 21, 2023 pm 06:22 PM

實現微信小程式中的圖片濾鏡效果隨著社群媒體應用程式的流行，人們越來越喜歡在照片中應用濾鏡效果，以增強照片的藝術效果和吸引力。在微信小程式中也可以實現圖片濾鏡效果，為使用者提供更多有趣和創意的照片編輯功能。本文將介紹如何在微信小程式中實現圖片濾鏡效果，並提供具體的程式碼範例。首先，我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題