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

2022-08-24 17:00:11 字數 2682 閱讀 3077

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

2.這段**

var cartitems = this.data.cartitems  獲取購物車裡面的商品，之後在通過下標e.currenttarget.dataset.index來獲取當前的商品

選擇事件(單全選)

//


單選   select:function


(e)    


this


.setdata()


this


.getsumtotal()


},//全選


selectedcart:function


(e))


this


.getsumtotal();   


wx.setstoragesync("cartitems", cartitems)


}
購物車數量增加減少

add:function


(e) );


this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)  //


存快取},


//減reduce: function


(e)else


this


.setdata();


this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)


},
刪除事件

//


刪除   shanchu:function


(e));


if(cartitems.length) );


}this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)


},//提示


go:function


(e))


wx.setstoragesync("cartitems", )


},
商品**合計

//


合計   getsumtotal: function


()      }


//更新資料


this


.setdata()


},
整合**

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


page(,


onload:


function


(e),


onshow: 


function


() )


this


.getsumtotal()


},//


選擇   select:function


(e)    


this


.setdata()


this


.getsumtotal()


},add:


function


(e) );


this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)  //


存快取},


//減reduce: function


(e)else


this


.setdata();


this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)


},//選擇


selectedcart:function


(e))


this


.getsumtotal();   


wx.setstoragesync("cartitems", cartitems)


},//


刪除   shanchu:function


(e));


if(cartitems.length) );


}this


.getsumtotal()


wx.setstoragesync("cartitems", cartitems)


},//提示


go:function


(e))


wx.setstoragesync("cartitems", )


},//


合計   getsumtotal: function


()      }


//更新資料


this


.setdata()


},})
購物車的操作就這麼點，其實理解了很簡單，小程式的語法和vue的語法很相識，學過vue的寫小程式是很簡單的，第一次寫部落格寫的不好請諒解～～

微信小程式之購物車功能

先來弄清楚購物車的需求。根據設計圖，我們可以先實現靜態頁面。接下來，再看看乙個購物車需要什麼樣的資料。知道了需要這些資料，在頁面初始化的時候我們先定義好這些。page onshow 購物車列表資料我們一般是通過請求伺服器拿到的資料，所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都...

微信小程式之購物車功能

前言 以往的購物車，基本都是通過大量的 dom 操作來實現。微信小程式其實跟 vue.js 的用法非常像，接下來就看看小程式可以怎樣實現購物車功能。需求先來弄清楚購物車的需求。根據設計圖，我們可以先實現靜態頁面。接下來，再看看乙個購物車需要什麼樣的資料。知道了需要這些資料，在頁面初始化的時候我們先定...

微信小程式購物車功能

管理您的購物車 點選立即前往 全選 合計 結算 page shop mana management goto carts goods goods check checkbox goods details goods img goods img image goods title goods name...