示例
wxml
<view class="team_info_item" wx:for="{{list}}" wx:key="id" data-index="{{index}}" bindtap="select">
<view class="item_icon">
<image mode="widthFix" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=412796477,2371228780&fm=111&gp=0.jpg"></image>
</view>
<view class="team_content">
<view>
<view class="team_name">{{item.team_name}}</view>
<view class="team_leader">队长:{{item.team_leader}}</view>
</view>
<view class="tick">
<image hidden="{{item.checked}}" mode="widthFix" src="../../img/tick.png"></image>
</view>
</view>
</view>
wxss
.team_info_item {
display: flex;
padding-left: 52rpx;
padding-bottom: 20rpx;
}
.team_info_item .item_icon image {
width: 90rpx;
border-radius: 50%;
}
.team_info_item .team_content {
display: flex;
justify-content: space-between;
padding-left: 28rpx;
padding-right: 60rpx;
width: 100%;
color: #4a4a4a;
}
.team_info_item .team_content .team_name {
font-size: 32rpx;
font-weight: 600rpx;
font-family: "SourceHanSansCN-Medium";
}
.team_info_item .team_content .team_leader {
font-size: 28rpx;
font-family: "SourceHanSansCN-Normal";
}
.team_info_item .team_content .tick {
display: flex;
align-items: center;
width: 45rpx;
}
.team_info_item .team_content .tick image {
width: 100%;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
js
Page({
data: {
list: [{
team_name: '复仇者联盟',
team_leader: '美国队长',
checked: true
},
{
team_name: '神奇四侠',
team_leader: '鸣人',
checked: true
},
{
team_name: '航海王',
team_leader: '海贼王',
checked: true
}]
},
/*
需求:
+ 实现多个元素被选中
- 获取被点击元素的 下标
- 修改flag
*/
select: function (e) {
// 获取被点击元素的下标
const index = e.currentTarget.dataset.index
// 复制一份 list 数组
const list = this.data.list
// 修改 checked 的值 取反
list[index].checked = !list[index].checked
// 修改 data 中的 list
this.setData({
list
})
}
})