购物车单选:
- 数据需要有一个标记是否选中的变量isSelect,当每次点击选中或者取消时取反,这里面的class需要用三元表达式来表示
class='{{isSelect ? 'xuanzhong' : 'weixuanzhong'}}'
,以此来区别; - 由于所有的数据是通过循环生成的,需要来确定当前点击的对象,需要在每一项上绑定一个
data-
属性,比如data-id
,当我们绑定了bindtap='click'
时,可以通过事件e的
e.currentTarget.dataset.id
来确定当前点击的对象。
具体代码如下:
//wxml里面的代码
<view wx:for="{{list}}" class='{{item.isSelect ? "xuanzhong" : "weixuanzhong"}}' data-id="{{item.id}}" bindtap="click">{{item.name}}</view>
//js代码
<script>
click(e){
//这一步是从list中筛选出它子元素id与当前点击对象id相同的子元素,让其变量取反
let curr = this.data.list.find(r => r.id ===e.currentTarget.dataset.id )
curr.isSelect = ! curr.isSelect
//通知页面更新
this.setData({
list:this.data.list
})
}
</script>
购物车全选
在data里面设置一个变量isSelectAll来判断是否全选,当点击全选时,触发selectAll方法,isSelectAll先取反,然后用forEach方法将list遍历循环,将list里的isSelect=isSelectAll,最后通知页面更新。
<script>
selectAll(e){
isSelectAll = ! isSelectAll
this.data.list.forEach(r => {
//list里面每一项的isSelect和isSelectAll一致,达到全选或全不选的效果
r.isSelect = this.data.isSelectAll
})
//通知页面更新,要更新isSelectAll变量和list变量
this.setData({
list:this.data.list
isSelectAll:this.data.isSelectAll
})
}
</script>
当每一项全选时,全选打勾
这个需要在每一项点击的时候判断,用every方法遍历循环list里面所有项的isSelect是否等于isSelectAll,如果这个判断出来时true,则为全选。
代码如下
<script>
click(e){
let curr = this.data.list.find(r => r.id === e.currentTarget.dataset.id)
curr.isSelect = !curr.isSelect
let selectAll = this.data.list.every(r =>{
return r.isSelect === true
})
//这里由于isSelect 本身就是布尔值,可以直接返回isSelect ,所以可以简写成
// let selectAll = this.data.list.every(r => r.isSelect)
this.setData({
list: this.data.list,
isSelectAll: selectAll
})
}
</script>