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


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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php class类的用法详细总结
2013/10/17 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
一端时间轮换的广告
2006/06/26 Javascript
javascript学习网址备忘
2007/05/29 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
运动会稿件100字
2014/02/21 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
答谢酒会主持词
2015/07/02 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP