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

微信小程序基于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()
}

最终效果:

相关推荐
老华带你飞5 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台
说私域7 小时前
数字经济时代企业营销转型:基于定制开发开源AI智能名片S2B2C商城小程序的探索
人工智能·小程序
一匹电信狗8 小时前
【C++】C++11新特性第一弹(列表初始化、新式声明、范围for和STL中的变化)
服务器·开发语言·c++·leetcode·小程序·stl·visual studio
CRMEB定制开发12 小时前
CRMEB小程序订阅消息配置完整教程(PHP版)附常见错误解决
小程序·商城系统·小程序商城·微信商城·crmeb
赣州云智科技的技术铺子18 小时前
【一步步开发AI运动APP】十一、同时检测识别多人运动,分别进行运动计时计数
微信小程序·小程序·云开发·智能小程序
少油少盐不要辣1 天前
uniapp小程序使用自定义底部tabbar,并根据用户类型动态切换tabbar数据
小程序·uni-app
复苏季风1 天前
UniApp 小白入门实战专栏①:从安装 HBuilderX 开始,3 步跑通第一个项目
前端·微信小程序·uni-app
18538162800余」1 天前
小程序版碰一碰发视频:源码搭建与定制化开发的源头技术解析
小程序·音视频
2501_915918412 天前
uni-app 跨平台项目的 iOS 上架流程:多工具组合的高效协作方案
android·ios·小程序·https·uni-app·iphone·webview