其實購物車都是類似的實現方法，只不過小程序是有他的數據層和業務層，在這里把之前的做法記錄一下，分享出來也希望能給需要的小伙伴帶來參考價值在最開始的時候先從本地存儲中獲取購物車數據，因為我們會切換頁面 在頁面切換的過程中需要實時重新加載購物車的數據，所以我們把獲取的方法寫在onShow中，而不是onLoad中：
onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorageSync("address") ; console.log(address); this.setData({ address, cart }) this.loadCarts(); this.countAll(); }點擊按鈕更改購物車的數量：
handleNumEdit(e) { const { operator, goodsid } = e.target.dataset; let { cart } = this.data; cart[goodsid].count += (+operator); if (cart[goodsid].count < 1) { cart[goodsid].count = 1; wx.showModal({ title: '提示', content: '您確定要刪除嗎', showCancel: true, cancelText: '取消', cancelColor: '#000000', confirmText: '確定', confirmColor: '#3CC51F', success: (result) => { if (result.confirm) { delete cart[goodsid]; this.loadCarts(); this.countAll(); } else { } } }); } else if (cart[goodsid].count > cart[goodsid].goods_number) { cart[goodsid].count = cart[goodsid].goods_number; wx.showToast({ title: '沒有庫存了', icon: 'none', duration: 1500, mask: true }); } this.loadCarts(); this.countAll(); }加載購物車數據的方法：
data: { cart: {}, address: {}, totalPrice: 0, categoryLength: 0, isAllChecked: true },單個商品被選中時觸發：
loadCarts() { let { cart } = this.data; let isAllChecked = true; for (const key in cart) { if (cart.hasOwnProperty(key)) { const element = cart[key]; if (!element.isChecked) { isAllChecked = false; break; } } } this.setData({ cart, isAllChecked }); },全選和反選觸發的事件：
handleItemChecked(e) { let { goodsid } = e.target.dataset; let { cart } = this.data; let { isChecked } = cart[goodsid]; cart[goodsid].isChecked = !isChecked; let checkedLength = 0; for (const key in cart) { if (cart.hasOwnProperty(key)) { if (cart[key].isChecked) { checkedLength++; } } } const isAllChecked = checkedLength == Object.keys(cart).length; this.countAll(); this.setData({ isAllChecked }) },點擊結算時觸發：
handleItemAllChecked() { let { isAllChecked } = this.data; let { cart } = this.data; isAllChecked = !isAllChecked; for (const key in cart) { if (cart.hasOwnProperty(key)) { cart[key].isChecked = isAllChecked; } } this.setData({ isAllChecked, cart }) this.countAll(); },純js代碼，可能有一定小程序代碼經驗的會看得輕松一點。以上便可以實現在對購物車的商品進行加減和全選與反選，以及對商品進行數量合計并計算價格。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
