微信小程序之購物車的功能

1.購物車里面功能無非就是刪除商量，增加(減少)數量，單全選，商品合計

2.這段代碼var cartItems = this.data.cartItems  獲取購物車里面的商品，之后在通過下標e.currentTarget.dataset.index來獲取當前的商品

 

 

 

選擇事件(單全選)

  //單選
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },

    // 全選
   selectedCart:function(e){
     
    var cartItems = this.data.cartItems   //獲取購物車列表
    var index = e.currentTarget.dataset.index;  //獲取當前點擊事件的下標索引
    var selected = cartItems[index].selected;    //獲取購物車里面的value值

    //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();   
    wx.setStorageSync("cartItems", cartItems)
   }

 購物車數量增加減少

add:function (e) {
     var cartItems = this.data.cartItems   //獲取購物車列表
     var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引
     var value = cartItems[index].value  //獲取購物車里面的value值
     
     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     
     wx.setStorageSync("cartItems", cartItems)  //存緩存
   },
   
    //減
   reduce: function (e){
     var cartItems = this.data.cartItems  //獲取購物車列表
     var index = e.currentTarget.dataset.index  //獲取當前點擊事件的下標索引
     var value = cartItems[index].value  //獲取購物車里面的value值

    if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

 刪除事件

 //刪除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //獲取購物車列表
     var index = e.currentTarget.dataset.index  //獲取當前點擊事件的下標索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },

 商品價格合計

//合計
   getsumTotal: function () {
     var sum = 0
     for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新數據
     this.setData({
       total: sum
     })
   },

 整合代碼

var json = require('../../data/Home_data.js')

Page({
  data: {
    cartItems:[],
    total:0,
    CheckAll:true
  },
  onLoad:function(e){
    
  },
   onShow: function () {
     var cartItems = wx.getStorageSync("cartItems")
     this.setData({
       cartList: false,
       cartItems: cartItems
     })
     this.getsumTotal()
     
   },

  //選擇
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },
   add:function (e) {
     var cartItems = this.data.cartItems   //獲取購物車列表
     var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引
     var value = cartItems[index].value  //獲取購物車里面的value值
     
     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     
     wx.setStorageSync("cartItems", cartItems)  //存緩存
   },
   
    //減
   reduce: function (e){
     var cartItems = this.data.cartItems  //獲取購物車列表
     var index = e.currentTarget.dataset.index  //獲取當前點擊事件的下標索引
     var value = cartItems[index].value  //獲取購物車里面的value值

    if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },
  
    // 選擇
   selectedCart:function(e){
     
    var cartItems = this.data.cartItems   //獲取購物車列表
    var index = e.currentTarget.dataset.index;  //獲取當前點擊事件的下標索引
    var selected = cartItems[index].selected;    //獲取購物車里面的value值

    //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();   
    wx.setStorageSync("cartItems", cartItems)
   },

  
   

   //刪除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //獲取購物車列表
     var index = e.currentTarget.dataset.index  //獲取當前點擊事件的下標索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },


   //合計
   getsumTotal: function () {
     var sum = 0
     for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新數據
     this.setData({
       total: sum
     })
   },
})

 

購物車的操作就這么點，其實理解了很簡單，小程序的語法和vue的語法很相識，學過vue的寫小程序是很簡單的，第一次寫博客寫的不好請諒解～～

代碼以上傳到githun上：https://github.com/Mynameisfwk/wechat-app-vivo