微信小程序 Button 点击事件添加 Class 实现动态样式

在小程序中，无法直接为组件添加 class 属性，但可以通过 setData 方法来动态修改组件的样式。

1. 首先，在 button 组件上绑定点击事件。

<button bindtap='handleClick' data-btnid='{{index}}'>按钮</button>

2. 在 Page 的 data 中定义一个 btnList 数组，用于存储每个按钮的样式。

data: {
  btnList: []
}

3. 在 handleClick 方法中，获取按钮的 data-btnid 属性，根据这个属性修改对应按钮的样式，并将修改后的样式存入 btnList 中。

handleClick(e) {
  const index = e.currentTarget.dataset.btnid;
  const btnList = [...this.data.btnList];
  btnList[index] = 'active';
  this.setData({
    btnList
  });
}

4. 在 button 组件上通过 wx:if 指令来判断按钮是否处于激活状态，并为激活状态的按钮添加相应的样式。

<button bindtap='handleClick' data-btnid='{{index}}' wx:if='{{btnList[index] === 'active'}}' class='active-btn'>按钮</button>
<button bindtap='handleClick' data-btnid='{{index}}' wx:else>按钮</button>

5. 在 wxss 中定义 .active-btn 样式，用于设置激活状态的按钮的样式。

.active-btn {
  background-color: red;
  color: #fff;
}