小程序 --- 实现选中出现对勾功能（单选）（方法一）

方法一

方法二：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
      })
    }
  }
})