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


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 相关文章推荐
javascript中的正则表达式使用指南
Mar 01 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 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 实用代码收集
2010/01/22 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
校三好学生主要事迹
2014/01/11 职场文书
爱我中华教学反思
2014/04/28 职场文书
大专毕业生求职信
2014/07/05 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL