微信小程序购物车全选反选功能以及合计

微信小程序基于Vant Weapp的购物车功能实现

1、单选

使用微信小程序原生表单组件checkbox和checkbox-group

注意：checkbox原生不支持bind:change事件，checkbox-group支持

<checkbox-group bindchange="handleCheck"><checkbox value="1" checked="{{isCheck1}}"></checkbox><checkbox value="2" checked="{{isCheck2}}"></checkbox><checkbox value="3" checked="{{isCheck3}}"></checkbox>
</checkbox-group>

需要在checkbox-group上绑定bind:change事件，并在checkbox标签上赋值value属性

  handleCheck(event) {// 所有选中的商品的valuelet checkedIds = event.detail.value;  //['1']},

进行单选操作时，在change事件的参数中可以获取到所有在checkbox-group中被选中的元素的value值组成的数组

2、全选

在实现全选功能时，一般全选只有一个复选框，但是也需要套一个checkbox-group，利用原生的微信小程序封装好的bind:change事件，可以更加方便的实现功能

<checkbox-group bindchange="handleCheckAll"><checkbox checked="{{allCheck}}" value="{{true}}" />
</checkbox-group>

全选框需要帮定一个参数动态存储复选框的状态，并在change事件中修改这个状态，以及控制其他可选框的状态和全选框一致

handleCheckAll(event){this.setData({allCheck: !this.data.allCheck,isCheck1: !this.data.allCheck,isCheck2: !this.data.allCheck,isCheck3: !this.data.allCheck})
},

注意：这里看上去虽然没有用上checkbox-group的参数，但是解决了在复选框上绑定点击事件覆盖原生可选框的功能

3、全选和单选联动

在前面已经完成单选和全选的独立功能了，但是无法实现在选中所有单选的复选框时全选框也选中，

所有的单选框选没有选中时，全选框同时取消

实现思路：一般购物车的数据是根据数据渲染出来的，所以可以获取到所有商品的数量，与单选checkbx-group的回调函数中的参数进行对比，如果选中的数量小于总数，则设置全选框为false，如果选中的数量等于总数，则设置全选框为true。

实例代码：

handleCheck(event) {// 所有选中的商品的valuelet checkedIds = event.detail.value;// 全部商品的数量const length = this.data.shopList.lengthif(checkedIds.length < length){this.setData({allCheck: false})}else if(checkedIds.length == length){this.setData({allCheck: true})}
}

4、总价的计算

对于总价计算，需要在进行单选和全选时都要进行更新total，所以需要封装成一个函数，在进行操作的回调函数中调用，实现总价的实时更新

  render() {const priceShop = this.data.shopList.filter(ele => ele.isCheck === true)const total = priceShop.reduce((acc, cur) => {const value = cur.num * parseInt(cur.finVersion[1], 10); // 确保 parseInt 有一个基数，这里使用 10return acc + value;}, 0); // 初始化累加器为 0this.setData({allPrice: total})},

在render函数中先获取所有被选中的单选框，并使用reduce方法将每个数据中的数量和单价相乘并累加，然后使用setData方法更新total值，实现合计的更新

//单选的回调
handleCheckAll(event){...render()
},
//全选的回调
handleCheck(event) {...render()
}

最终效果：