今天記錄一下購物車案例，實現購物車的全選，單選，數量加一減一，金額總數，以及清空購物車。

<view class="main"> <!-- hasList 列表是否有數據 --><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}}"></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-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}}">×</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"/><navigator url="../orders/orders"><view class="order-icon"></view></navigator><text>全選</text><!-- 總金額 --><text class="cart-toatl-price">￥{{totalPrice}}</text></view></view><view wx:else><view class="cart-no-data">購物車是空的哦~</view></view> </view> // page/component/new-pages/cart/cart.js Page({data: {carts:[], // 購物車列表hasList:false, // 列表是否有數據totalPrice:0, // 總價，初始為0selectAllStatus:true // 全選狀態，默認全選 },onShow() {this.setData({hasList: true,carts:[{id:1,title:'白菜 半斤',image:'/image/s5.png',num:4,price:0.02,selected:true},{id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.05,selected:true}]});this.getTotalPrice();},/*** 當前商品選中事件*/selectList(e) {const index = e.currentTarget.dataset.index;let carts = this.data.carts;const selected = carts[index].selected;carts[index].selected = !selected;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});}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;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)});}})

?

轉載于:https://www.cnblogs.com/juewuzhe/p/8227799.html

總結

以上是生活随笔為你收集整理的微信小程序（11）--购物车的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。