方法一:https://blog.csdn.net/CEZLZ/article/details/106237068
方法二
示例
wxml:布局和 方法一 是一样的
<view class="team_info_item" wx:for="{{list}}" wx:key="id" bindtap="select" data-index="{{index}}">
<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.flag}}" 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: '美国队长',
flag: true
},
{
team_name: '神奇四侠',
team_leader: '鸣人',
flag: true
},
{
team_name: '航海王',
team_leader: '海贼王',
flag: true
}]
},
/*
需求:
+ 实现元素之间的单选和切换
- 当点击某个元素时,获取当前元素的 index
- 让被点击的元素的 flag 取反
- 未被点击的元素的 flag 为 true
*/
select: function (e) {
const _this = this
// 获取被点击元素的下标
const index = e.currentTarget.dataset.index
// 复制一份 list 数组
const list_cp = this.data.list
// 循环便利 list
list_cp.forEach((v, i) => {
if (index === i) {
// 修改被点击元素的 flag, 取反
list_cp[index].flag = !list_cp[index].flag
// 修改 data 中的 list
_this.setData({
list: list_cp
})
} else {
// 未被点击的元素 flag 为 true,取消对勾
v.flag = true
_this.setData({
list: list_cp
})
}
})
}
})