微信小程序基于Vant Weapp的购物车功能实现
1、单选
使用微信小程序原生表单组件checkbox和checkbox-group
注意:checkbox原生不支持bind:change事件,checkbox-group支持
html
<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属性
js
handleCheck(event) {
// 所有选中的商品的value
let checkedIds = event.detail.value; //['1']
},
进行单选操作时,在change事件的参数中可以获取到所有在checkbox-group中被选中的元素的value值组成的数组
2、全选
在实现全选功能时,一般全选只有一个复选框,但是也需要套一个checkbox-group,利用原生的微信小程序封装好的bind:change事件,可以更加方便的实现功能
js
<checkbox-group bindchange="handleCheckAll">
<checkbox checked="{{allCheck}}" value="{{true}}" />
</checkbox-group>
全选框需要帮定一个参数动态存储复选框的状态,并在change事件中修改这个状态,以及控制其他可选框的状态和全选框一致
js
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。
实例代码:
js
handleCheck(event) {
// 所有选中的商品的value
let checkedIds = event.detail.value;
// 全部商品的数量
const length = this.data.shopList.length
if(checkedIds.length < length){
this.setData({
allCheck: false
})
}else if(checkedIds.length == length){
this.setData({
allCheck: true
})
}
}
4、总价的计算
对于总价计算,需要在进行单选和全选时都要进行更新total,所以需要封装成一个函数,在进行操作的回调函数中调用,实现总价的实时更新
js
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 有一个基数,这里使用 10
return acc + value;
}, 0); // 初始化累加器为 0
this.setData({
allPrice: total
})
},
在render函数中先获取所有被选中的单选框,并使用reduce方法将每个数据中的数量和单价相乘并累加,然后使用setData方法更新total值,实现合计的更新
js
//单选的回调
handleCheckAll(event){
...
render()
},
//全选的回调
handleCheck(event) {
...
render()
}
最终效果: