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


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中的undefined和not defined区别示例介绍
Feb 26 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
js获取变量
2006/08/24 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js实现微信分享代码
2020/10/11 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
学习和使用python的13个理由
2019/07/30 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
武汉瑞得软件笔试题
2015/10/27 面试题
网络工程专业自荐信范文
2014/03/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis