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

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

小程序购物车之加入购物车相关推荐

微信小程序底部菜单、购物车实现
首先看看目标效果: 先用view容器搭建页面的结构,由于最开始我引入了阿里云的图标库,所以一打开就能看得到图标的出现: 现在的效果是:用position:fixed + flex实现快速的布局 .bt ...
原生小程序Tabbar底部加购物车
今天接到一个需求:让在原生微信小程序底部Tabbar栏加如下图所示的效果实现方式: wx.setTabBarBadge({index: 2,//在哪个下标text:'2'//需要添加的值 }) 根据 ...
微信小程序（11）--购物车
今天记录一下购物车案例,实现购物车的全选,单选,数量加一减一,金额总数,以及清空购物车. <view class="main"> <!-- hasList 列表是 ...
小程序自定义tabbar中购物车数量不同步问题
在自定义tabbar中加入了公共的购物车数量显示,但是在切换页面时这个数会来回变. 具体现象是在分类页面中购物车数量显示16,然后切换到购物车页面新加了两个商品变为18 ,这时候切换回分类页面会发现 ...
微信小程序（五）购物车
shoppingcart.wxml  <view class="content&quo ...
微信小程序商城系列之购物车
购物车功能基本上算是每个商城都有的功能,也是整个商城系统最重要的部分,购物车的做法有很多种,一般存放在本地缓存和数据库中比较常见,本文就是存放到了数据库中: 先放一张效果图: 先分析下要实现的功能: ...
android 飞入购物车效果,大佬留步，小程序中如何实现购物车商品曲线飞入效果（类似饿了么）...
// 需要加入动画的页面js data:{ // add goods animate needAni: false, hide_good_box: true, hideCount: true, // ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
微信小程序购物车简单实例
微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.购物车id:cid ...

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

小程序购物车之加入购物车相关推荐

最新文章

热门文章