微信小程序——购物车结算
项目需要做个购物车结算功能,先分析需求:
1.全选,反选的功能。当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮;
2.改变选中状态时,计算总价和总数量;
3.单个产品的数量加减;
4.列表某项选中时,如果数量改变,总价和总数量相应改变。
一些说明:
复选框默认用的小程序的checkbox组件。
为了正在看这篇文章的你更好的理解,我把设置的data截图展示出来:

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

wxml截图:

2.对购物车列表进行操作的时候,需要3个操作:
- 计算总价和总数量;
- 当前选中状态的改变;
- 是实时判断它选中的个数,用来判断是否勾选全选。
2.1. 计算总价,总数量,改变选中状态主要代码截图如下:

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

js截图:

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

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

2.4 产品选中时,数量改变,总价和总数量相应改变。
+,-按钮的wxml截图:

js截图:

总价,总数量的wxml截图:

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

到这里所有的功能实现已经讲述完毕。这篇文章讲的是一个实现的思路,所以都是截图。对于文中这些功能的实现,如果你有更简单的方法,或者对于我的代码你有更好的建议,望不吝赐教~
微信小程序——购物车结算的更多相关文章
- 微信小程序购物车产品计价
微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCa ...
- 微信小程序全选,微信小程序checkbox,微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
- “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。
最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...
- 微信小程序购物车实现
1,wxml <view class="miniCart-wrap {{isIpx?'is-ipx':''}}"> <view class="miniC ...
- 微信小程序购物车功能
<view class='shop-mana'> <text class='management'>管理您的购物车</text> <text class='g ...
- 微信小程序——购物车数字加减
上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setDat ...
- 微信小程序 购物车流程
购物车流程 一.需求分析 a:全选,单选,根据选中的计算数目和总价 b:单个商品加减 c:删除一个商品 wxml 布局 <view> <view v-if="flag&qu ...
- 微信小程序实例源码大全
微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
随机推荐
- 潭州课堂25班:Ph201805201 django 项目 第十七课 用户登录,登出实现 (课堂笔记)
登录,校验: 1,判断用户名输入是否为空, 2,判断用户名密码是否匹配, 3,记住我的功能,:将用户信息记到 session 中 请求方式: POST 在视图中: # 1,创建类# 2,获取前台参数# ...
- java反射机制基础
java反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和 属性:这种动态获取信息以及动态调用对象方法的功能称为j ...
- git 命令的使用
hello git 穿越时空 修改一条数据 git status 查看是否修改 git diff file1 如何修改的 git add file1 git commit -m "提交的信息 ...
- [P2058][NOIP2015]海港 (模拟)
%%%ADMAN #include<cstdio> using namespace std; int n,tot,now,ans,h; ],k[],a[],sum[]; int main( ...
- C++学习笔记53:泛型程序设计与C++标准模板库
泛型程序设计的基本概念 编写不依赖于具体数据类型的程序 将算法从特定的数据结构中抽象出来,成为通用的 C++模板为泛型编程程序设计奠定了关键的基础 模型:符合一个概念的数据类型称为该概念的模型,例如: ...
- yii2 配合bootstrap添加一个气泡
添加一个气泡 1.bootstrap 官网:http://getbootstrap.com/ 2.bootstrap 中文官网:http://v3.bootcss.com/ 添加气泡主要需要用到 bo ...
- java第十三周测试记录
今天课上遇到了问题,在我的上一篇随笔,这个阻碍了我很长时间,而且上一次也是这个问题,真的吃一堑不长一智,这次我应该就记住了,嗯. 设计思路: 俩个库: 1.一个库存商品,商品的基本属性和商品的数量(数 ...
- js 事件冒泡、捕获;call()、apply()
他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是 ...
- 【转】http的keep-alive和tcp的keepalive区别
http://blog.csdn.net/oceanperfect/article/details/51064574 1.HTTP Keep-Alive在http早期,每个http请求都要求打开一个t ...
- JavaWeb中过滤器Filter的url-pattern设置
源码 https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter-UrlPattern Filter顺序以及url ...