2022-01-04 工作记录--Wechat applet-实现多选

一、效果图

二、分析

在studentsDetails里自定义一个属性：isSelect，当点击某学员时，拿到对应的索引值，改变对应索引值的属性：isSelect（在true和false之间转换）

三、代码

wxml：

<view class="students">
    <view class="student" wx:for="{{studentsDetails}}" wx:key="index" data-index="{{index}}" bindtap="clickStudent">
    	<image src="" class="{{item.isSelect ? 'selectedImg' : ''}}"></image>
    	<view class="small_text textAlign {{item.isSelect ? 'change_textColor' : ''}}">赵玉田</view>
    </view>
</view>

wxss：

student>image {
  display: inline-block;
  width: 100%;
  height: 116rpx;
  border-radius: 50%;
  background-color: pink;
  object-fit: cover;
  vertical-align: top;
  margin-bottom: 16rpx;
}

.selectedImg {
  width: 104rpx !important;
  height: 104rpx !important;
  border: 6rpx solid #FFB219;
}

.change_textColor {
  color: #ffaf10;
}

.textAlign {
  text-align: center;
}
.small_text {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  color: #666666;
}

js：【重点】

Page({

  /**
   * 页面的初始数据
   */
  data: {
    studentsDetails: [{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false}], // 弹出层-打卡的学员
  },
  
  // 弹出层-选择打卡学员
  clickStudent(e) {
    // 获取到点击内容的索引值
    const index = e.currentTarget.dataset.index;

	// 【注意】下面的key获取到的值是字符串
    const key = `studentsDetails[${index}].isSelect` // 第一种写法：es6写法
    // const key = "studentsDetails["+index+"].isSelect"; // 第二种写法：+号拼接
    
    this.setData({
      // 注意：下面的key要加[]，因为key是个变量 ———— 在对象里面，属性/key值 为变量，要加中括号
      [key]: !this.data.studentsDetails[index].isSelect
    })
    
  },
  
})

【JS中获取到点击内容的索引值 可参考我的另一篇博客里的 2、事件】