這篇文章給大家介紹小程序開發中如何實現一個簡單的購物車功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
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 () {
}
})
關于小程序開發中如何實現一個簡單的購物車功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
