微信小程序实现购物车代码实例详解


Posted in Javascript onAugust 29, 2019

其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中:

onShow: function () {
  const cart = wx.getStorageSync("cart");
  let address = wx.getStorageSync("address") ;
  console.log(address);
  this.setData({
   address, cart
  })
  this.loadCarts();
  this.countAll();
 }

点击按钮更改购物车的数量:

handleNumEdit(e) {
  const { operator, goodsid } = e.target.dataset;
  let { cart } = this.data;
  cart[goodsid].count += (+operator);
  if (cart[goodsid].count < 1) {
   cart[goodsid].count = 1;
   wx.showModal({
    title: '提示',
    content: '您确定要删除吗',
    showCancel: true,
    cancelText: '取消',
    cancelColor: '#000000',
    confirmText: '确定',
    confirmColor: '#3CC51F',
    success: (result) => {
     if (result.confirm) {
      delete cart[goodsid];
      this.loadCarts();
      this.countAll();
     } else {
     }
    }
   });
  } else if (cart[goodsid].count > cart[goodsid].goods_number) {
   cart[goodsid].count = cart[goodsid].goods_number;
   wx.showToast({
    title: '没有库存了',
    icon: 'none',
    duration: 1500,
    mask: true
   });
  }
  this.loadCarts();
  this.countAll();
 }

加载购物车数据的方法:

data: {
  cart: {},
  address: {},
  totalPrice: 0,
  categoryLength: 0,
  isAllChecked: true
 },

单个商品被选中时触发:

loadCarts() {
  let { cart } = this.data;
  let isAllChecked = true;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
    const element = cart[key];
    if (!element.isChecked) {
     isAllChecked = false;
     break;
    }
   }
  }
  this.setData({
   cart,
   isAllChecked
  });
 },

全选和反选触发的事件:

handleItemChecked(e) {
  let { goodsid } = e.target.dataset;
  let { cart } = this.data;
  let { isChecked } = cart[goodsid];
  cart[goodsid].isChecked = !isChecked;
  let checkedLength = 0;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
    if (cart[key].isChecked) {
     checkedLength++;
    }
   }
  }
  const isAllChecked = checkedLength == Object.keys(cart).length;
  this.countAll();
  this.setData({
   isAllChecked
  })
 },

点击结算时触发:

handleItemAllChecked() {
  let { isAllChecked } = this.data;
  let { cart } = this.data;
  isAllChecked = !isAllChecked;
  for (const key in cart) {
   if (cart.hasOwnProperty(key)) {
    cart[key].isChecked = isAllChecked;
   }
  }
  this.setData({
   isAllChecked,
   cart
  })
  this.countAll();
 },

纯js代码,可能有一定小程序代码经验的会看得轻松一点。以上便可以实现在对购物车的商品进行加减和全选与反选,以及对商品进行数量合计并计算价格。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 #Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
浅析javascript的return语句
2015/12/15 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python操作csv文件实例详解
2017/07/31 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python中eval与int的区别浅析
2019/08/11 Python
python opencv实现简易画图板
2020/08/27 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
土木工程专业推荐信
2014/02/19 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
大专生自荐书范文
2014/06/22 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书