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

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

最终效果:

相关推荐
HERR_QQ9 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun17 小时前
小程序导航设置更多内容的实现方法
小程序
说私域17 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg66817 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳18 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12120 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉1 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序