小程式購物車之加入購物車
阿新 • • 發佈:2018-11-08
購物車功能有兩個步驟,1:加入購物車 2:在購物車中增加商品數量,刪除商品等等一系列操作,今天先將加入購物車的功能完成
wxml:
<view class="cart" bindtap='addCart' data-id="{{book.id}}" data-img="{{book.goods_img}}" data-title="{{book.goods_title}}" data-price="{{book.goods_prom_price}}" data-num="1" >加入購物車</view>
js:
addCart:function(res){ //建立動畫, var animation = wx.createAnimation({ duration: 3000, timingFunction: 'ease-in-out' }); this.animation = animation; animation.translateY(-336).step(); this.setData({ animationData: this.animation.export(), maskVisual: 'show' }); var that = this; var cart = wx.getStorageSync('cart') || [];//判斷cart存不存在 var exist = cart.find(function (ele) { //find遍歷cart陣列 return ele.id === res.currentTarget.dataset.id; }) if (exist){ exist.num = parseInt(exist.num) + parseInt(res.currentTarget.dataset.num);//如果加入購物車的商品存在就增加數量 }else{ cart.push(res.currentTarget.dataset); } wx.setStorage({ key: 'cart', data: cart, success: function (res) { //新增購物車的訊息提示框 wx.showToast({ title: "加入購物車成功", icon: "success", durantion: 2000 }) } }) //購物車的圖示右上方提示購物車中有多少商品 var total = 0; cart.find(function (ele) { total += parseInt(ele.num); }) this.setData({ cartNum: total }); },
參考:https://blog.csdn.net/sinat_32034679/article/details/78748206