• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序——购物车结算

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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截图:

 

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

 

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap