微信小程序 点击改变样式

在微信小程序中，可以通过在页面的 WXML 文件中添加事件绑定，然后在对应的 JS 文件中编写事件处理函数来实现点击改变样式的功能。以下是一个简单的示例：

1. 在页面的 WXML 文件中，添加一个按钮，并为其绑定一个点击事件 onTap：

<view class="container">
 <button class="{{btnClass}}" bindtap="onTap">点击改变样式</button>
</view>

2. 在页面的 WXSS 文件中，定义两个样式类 btn-default 和 btn-active：

.btn-default {
  background-color: #1AAD19;
  color: white;
}

.btn-active {
  background-color: red;
  color: white;
}

3. 在页面的 JS 文件中，编写事件处理函数 onTap，用于切换按钮的样式类：

Page({
  data: {
    btnClass: 'btn-default',
  },

  onTap: function () {
    this.setData({
      btnClass: this.data.btnClass === 'btn-default' ? 'btn-active' : 'btn-default',
    });
  },
});

在这个示例中，我们使用了一个名为 btnClass 的数据属性来存储按钮的样式类。当用户点击按钮时，onTap 函数会被调用，它会切换 btnClass 的值，从而改变按钮的样式。