微信小程序button点击后变色

在微信小程序中，可以使用`bindtap`属性来监听按钮的点击事件，并在事件处理函数中修改按钮的样式以实现点击后变色的效果。

首先，在wxml文件中定义一个按钮，并为其绑定一个点击事件：

<button bindtap="changeColor" class="my-button">按钮</button>

然后，在对应的js文件中编写事件处理函数，通过修改按钮的样式来改变其颜色：

Page({
  data: {
    buttonColor: '#ffffff' // 设置按钮初始颜色
  },

  changeColor: function () {
    this.setData({
      buttonColor: '#ff0000' // 设置按钮点击后的颜色
    });
  }
});

最后，在对应的wxss文件中定义按钮的样式，使用data中的buttonColor作为背景颜色：

.my-button {
  background-color: {{buttonColor}};
  /* 其他样式属性 */
}

这样，当按钮被点击时，按钮的背景颜色会变为`#ff0000`。你可以根据需求自行修改按钮的样式和颜色。

相关问题

微信小程序 button

微信小程序中，可以使用`<button>`标签来创建按钮。

示例代码：

<button type="primary">Primary Button</button>
<button type="default">Default Button</button>
<button type="warn">Warn Button</button>

以上代码分别创建了三个按钮，分别是主要按钮（primary）、默认按钮（default）和警告按钮（warn）。

可以使用`type`属性来设置按钮的类型，可选值为`primary`、`default`和`warn`。

除了`type`属性，还可以设置按钮的大小、圆角、禁用状态等。具体属性设置可以参考微信小程序官方文档。

微信小程序button多选框点击事件

微信小程序中的多选框可以通过button组件来实现，可以通过以下步骤来添加点击事件：

1. 在wxml文件中添加button组件，并设置按钮的样式和文本内容。同时给button组件绑定一个点击事件，例如：

<button class="checkbox" bindtap="checkboxTap">多选框</button>

2. 在js文件中编写点击事件的处理函数，例如：

Page({
  checkboxTap: function(e) {
    console.log('多选框被点击了');
    // 在这里可以实现多选框的选中状态切换逻辑
  }
})

3. 在处理函数中可以通过e参数获取点击事件的信息，例如点击的按钮的id、dataset等信息，从而实现多选框的选中状态切换逻辑。