微信小程序——购物车结算
项目需要做个购物车结算功能,先分析需求:
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组件 ...
随机推荐
- vim技巧5 常用操作
vim:set number:set nonumbern 移动命令键8l 向右移动八个字符3j 向下移动三行3G:移动到第三行行首10$:下移到10行,并定位到行尾:n1,n2s/word1/word ...
- Java Socket基本使用
首先 编写Client程序: import java.io.IOException; import java.net.Socket; import java.util.Scanner; public ...
- Mssql数据库与Excel导数据
*.xls 2003的excel有行数限制,65535行好像,所以数据库行数多的时候,选择导出为*.xlsx文件 要装一下Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎) ...
- 四方定理(递归) --java
四方定理 数论中有著名的四方定理:所有自然数至多只要用四个数的平方和就可以表示. 我们可以通过计算机验证其在有限范围的正确性. import java.*; import java.util.*; p ...
- js 创建Table,每行3列的方式
table: <table style="width:100%" id="appDatas"></table> 1. var table ...
- JS膏集01
JS膏集01 1.动态页面: 向服务器发送请求,服务器那边没有页面,动态生成后,返回给客户端 由html/css/js组成. js还不是面向对象的语言,是基于对象的语言.js中没有类的概念,js的继承 ...
- JSAP106
JSAP106 一.clientX.clientY 点击位置距离当前body可视区域的x,y坐标 二.pageX.pageY 对于整个页面来说,包括了被卷去的body部分的长度 三.screenX.s ...
- openstack 之~keystone部署
第一:版本信息 官网http://docs.openstack.org/newton/install-guide-rdo/keystone.html 我们按照Newton这个版本来部署,opensta ...
- Using async-await on .net 4
I'm currently starting to create an application that would profit a lot from C# 5's async-await feat ...
- gitbook build 报错
如下图所示 解决方案,通过 everythings 找到 copyPluginAssets.js,然后搜索 confirm,将其值 true –> false 参考链接:https://git ...