项目需要做个购物车结算功能,先分析需求

1.全选,反选的功能。当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮;

2.改变选中状态时,计算总价和总数量;

3.单个产品的数量加减;

4.列表某项选中时,如果数量改变,总价和总数量相应改变。

一些说明:

复选框默认用的小程序的checkbox组件。

为了正在看这篇文章的你更好的理解,我把设置的data截图展示出来:

解决步骤:

1.后台获取购物车列表的时候,默认给它添加一个selected属性,设置为false,并把这个值赋值给列表的checkbox的checked。如下图:

wxml截图:

2.对购物车列表进行操作的时候,需要3个操作:

  1. 计算总价和总数量;
  2. 当前选中状态的改变;
  3. 是实时判断它选中的个数,用来判断是否勾选全选。

2.1. 计算总价,总数量,改变选中状态主要代码截图如下:

 2.2. 判断是不是全部选中,我们可以利用 checkbox-group的返回值,如果返回值数组的个数 = 购物车列表的长度,就勾选全选按钮。

js截图:

注意:这个checkboxChange是绑定在 <checkbox-group>组件上的,别绑定到<checkbox>上面去了。

全选的wxml截图:

 2.3 全选,全不选

代码里面有注释,这块理解起来应该很容易了。

2.4 产品选中时,数量改变,总价和总数量相应改变。

+,-按钮的wxml截图:

js截图:

总价,总数量的wxml截图:

上面截图对应下面的区域:

到这里所有的功能实现已经讲述完毕。这篇文章讲的是一个实现的思路,所以都是截图。对于文中这些功能的实现,如果你有更简单的方法,或者对于我的代码你有更好的建议,望不吝赐教~

微信小程序——购物车结算的更多相关文章

  1. 微信小程序购物车产品计价

    微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCa ...

  2. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  3. “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。

    最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...

  4. 微信小程序购物车实现

    1,wxml <view class="miniCart-wrap {{isIpx?'is-ipx':''}}"> <view class="miniC ...

  5. 微信小程序购物车功能

    <view class='shop-mana'> <text class='management'>管理您的购物车</text> <text class='g ...

  6. 微信小程序——购物车数字加减

    上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setDat ...

  7. 微信小程序 购物车流程

    购物车流程 一.需求分析 a:全选,单选,根据选中的计算数目和总价 b:单个商品加减 c:删除一个商品 wxml 布局 <view> <view v-if="flag&qu ...

  8. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

  9. 微信小程序开源项目库汇总

    最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...

随机推荐

  1. Python3基础-特别函数(map filter partial reduces sorted)实例学习

    1. 装饰器 关于Python装饰器的讲解,网上一搜有很多资料,有些资料讲的很详细.因此,我不再详述,我会给出一些连接,帮助理解. 探究functools模块wraps装饰器的用途 案例1 impor ...

  2. Android系统定制——Download Android System 及加载system镜像文件

    定制android系统(配置及相关系统的镜像文件),具体可参考:Driver_All_in_One_V1.0——MT6735_6753.pdf文档,特别需要理解的是Download部分. 与之对应的软 ...

  3. DWM1000 蓝点无限 PCB样板

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: 虽然经过一段很长时间的停滞,最近调试成功,可以实现精准测距 和定位. 部分模块正在陆续整理,准备出售一 ...

  4. IIS 日志分析工具:Log Parser Studio

    1.安装Log Parser,下载地址:http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=24659 ...

  5. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  6. Python二进制转十进制算法、十进转二进制算法

    二进制数转换成十进制数:二进制数从右向左每位数乘以2的次方(从0开始,从右向左依次+1),然后相加求和即可 如:0101转成十进制为:1*20+0*21+1*22+0*23 =1+0+4+0=5 算法 ...

  7. jmeter接口测试实例6-注册(参数化)

    Jmeter实例6:注册(参数化) 选中http协议,添加CSV Data set Config 准备参数中要使用到的值,存放到txt中,如果一个里面有多个参数,中间用,号分隔: 选中CSV元件,fi ...

  8. angular-环境搭建

    angular环境搭建(angular-cli) 1.安装nodejs http://nodejs.cn/download/ 2.Angular命令行工具安装 npm install -g @angu ...

  9. Tracing Memory access of an oracle process : Intel PinTools

    https://mahmoudhatem.wordpress.com/2016/11/07/tracing-memory-access-of-an-oracle-process-intel-pinto ...

  10. ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?

    JavaScript has a strange naming history. For its initial release in 1995 as part of Netscape Navigat ...