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

最新推荐文章于 2025-03-08 13:33:34 发布

原创最新推荐文章于 2025-03-08 13:33:34 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序系列专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现团队信息单选功能的方法。通过使用wxml、wxss和js代码，可以创建一个包含团队名称、队长名称和选择状态的组件。点击团队信息时，可以实现单选效果，同时更改被选中元素的状态。

方法一：https://blog.youkuaiyun.com/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
        })
      }
    })
  }
})