小程序中关于购物车的全选

购物车单选:

  1. 数据需要有一个标记是否选中的变量isSelect,当每次点击选中或者取消时取反,这里面的class需要用三元表达式来表示class='{{isSelect ? 'xuanzhong' : 'weixuanzhong'}}',以此来区别;
  2. 由于所有的数据是通过循环生成的,需要来确定当前点击的对象,需要在每一项上绑定一个data-属性,比如data-id,当我们绑定了bindtap='click'时,可以通过事件e的
    e.currentTarget.dataset.id来确定当前点击的对象。
    具体代码如下:
//wxml里面的代码
{{item.name}}

//js代码

购物车全选

在data里面设置一个变量isSelectAll来判断是否全选,当点击全选时,触发selectAll方法,isSelectAll先取反,然后用forEach方法将list遍历循环,将list里的isSelect=isSelectAll,最后通知页面更新。


当每一项全选时,全选打勾

这个需要在每一项点击的时候判断,用every方法遍历循环list里面所有项的isSelect是否等于isSelectAll,如果这个判断出来时true,则为全选。
代码如下



总结

你可能感兴趣的:(小程序中关于购物车的全选)