小程序购物车的逻辑

本文介绍如何在小程序中实现购物车复选框状态的同步,确保页面切换和更新时状态保持一致。通过添加商品属性判断选中状态,并在页面显示时从本地存储获取数据同步复选框。利用change事件监听选中状态变化,根据选中ID数组更新商品状态。同时阐述了计算总价的方法,筛选状态为true的商品并求和。欢迎交流不同的实现方式和优化建议。
摘要由CSDN通过智能技术生成

购物车的复选框状态同步

小程序的购物车
添加购物车时,我会添加一个属性用于判断我们的商品有没有没选中,如果被选中呢,就会让这个状态呢变为true,没选中的变为false。然后循环渲染数据的时候,我们复选框的checked属性就根据这个状态的true/false来添加/删除。
这样做我们在切换不同页面时保证复选框的状态不会发生改变。且当重新更新页面时也会同步我们勾选的商品。
比如下边这个wxml

// 我是使用了我们的小程序自带的复选框组,传入的是一组选中复选框的id,是一个数组形式。如:['1','2','3']
 <checkbox-group bindchange="change">
  // 事件我们绑定给checkbox-group 只要在这个标签内包裹的复选框状态发生改变,就会触发
      <block wx:for="{
  {list}}" wx:key="index">
        <view class="list_content">
          <view class="checkbox">
            <checkbox value="{
  {item.id}}" checked="{
  {item.flag}}"></checkbox> 
            // 我们复选框的checked绑定给了当前项的这个状态值。
            // 当前这个属性的值如果为true就会添加,false就会删除,checked属性
          </view>
       
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值