微信小程序> 小程序购物车之加入购物车

小程序购物车之加入购物车

浏览量:588 时间: 来源:dabao87

购物车功能有两个步骤,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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎