方法一
方法二:https://blog.csdn.net/CEZLZ/article/details/106237420
示例:实现了单选,状态切换
wxml
<view class="team_info_item" wx:for="{{list}}" wx:key="id" bindtap="select" data-id="{{item.id}}">
<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="{{isShow === item.id ? false : true}}" 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: [{
id: 1,
team_name: '复仇者联盟',
team_leader: '美国队长'
},
{
id: 2,
team_name: '神奇四侠',
team_leader: '鸣人'
},
{
id: 3,
team_name: '航海王',
team_leader: '海贼王'
}],
/* 选中的id,0 代表都不选中 */
isShow: 0
},
/*
需求:
+ 元素之间实现 单选
- 当点击某个元素时,把当前元素的 id 赋值给 isShow
- 通过 isShow 是否和元素的 id 相等来控制图片的显示和隐藏
+ 实现元素的 选中/未选中 之间的切换
- 点击时判断是否被选中,若选中 则取消,否则 选中
*/
select: function (e) {
// 获取当前被点击元素的 id
const id = e.currentTarget.dataset.id
const isShow = 0
// 通过 isShow 与 id 是否相等 来判断是否被选中
if (this.data.isShow === id) {
// 已经被选中 此时取消选中
this.setData({
isShow
})
} else {
this.setData({
isShow: id
})
}
}
})