微信小程序 购物车简单实例(3)

bindCheckout: function() { // 初始化toastStr字符串 var toastStr = 'cid:'; // 遍历取出已勾选的cid for (var i = 0; i < this.data.carts.length; i++) { if (this.data.carts[i].selected) { toastStr += this.data.carts[i].cid; toastStr += ' '; } } //存回data this.setData({ toastHidden: false, toastStr: toastStr }); }, bindToastChange: function() { this.setData({ toastHidden: true }); }

1.5 底部悬浮固定

1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx; 以及修改上边距为零，使得底部部件与分隔不重复出现，padding: 0 40rpx;

1.5.2 底部按钮 .carts-footer 加入 background: white;

1.5.3 .carts-footer 加入

position: fixed; bottom: 0; border-top: 1px solid #eee;

1.6 汇总

1.6.1 首先定义一个数据源，并在布局文件中埋坑

total: ''

<text>{{total}}</text>

1.6.2 通用汇总函数

sum: function() { var carts = this.data.carts; // 计算总金额 var total = 0; for (var i = 0; i < carts.length; i++) { if (carts[i].selected) { total += carts[i].num * carts[i].price; } } // 写回经点击修改后的数组 this.setData({ carts: carts, total: '￥' + total }); }

然后分别在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中调用this.sum()

如图：