快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)購物車代碼實(shí)例詳解

更新時(shí)間：2019年08月29日 11:17:16 作者：愛哭鼻子的小憂傷

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)購物車代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

其實(shí)購物車都是類似的實(shí)現(xiàn)方法，只不過小程序是有他的數(shù)據(jù)層和業(yè)務(wù)層，在這里把之前的做法記錄一下，分享出來也希望能給需要的小伙伴帶來參考價(jià)值在最開始的時(shí)候先從本地存儲(chǔ)中獲取購物車數(shù)據(jù)，因?yàn)槲覀儠?huì)切換頁面在頁面切換的過程中需要實(shí)時(shí)重新加載購物車的數(shù)據(jù)，所以我們把獲取的方法寫在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();
 }

點(diǎn)擊按鈕更改購物車的數(shù)量：

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: '您確定要?jiǎng)h除嗎',
    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();
 }

加載購物車數(shù)據(jù)的方法：

data: {
  cart: {},
  address: {},
  totalPrice: 0,
  categoryLength: 0,
  isAllChecked: true
 },

單個(gè)商品被選中時(shí)觸發(fā)：

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
  });
 },

全選和反選觸發(fā)的事件：

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
  })
 },

點(diǎn)擊結(jié)算時(shí)觸發(fā)：

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代碼，可能有一定小程序代碼經(jīng)驗(yàn)的會(huì)看得輕松一點(diǎn)。以上便可以實(shí)現(xiàn)在對(duì)購物車的商品進(jìn)行加減和全選與反選，以及對(duì)商品進(jìn)行數(shù)量合計(jì)并計(jì)算價(jià)格。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: