小程序多个按钮选中变色点击取消
时间: 2023-09-03 22:08:43 浏览: 55
您可以通过为每个按钮设置一个变量来实现这一功能。当用户点击按钮时,该按钮的变量将被设置为“选中”,并且该按钮的背景颜色将被更改。当用户再次点击该按钮时,该按钮的变量将被设置为“未选中”,并且该按钮的背景颜色将被还原为原始颜色。您可以使用类似下面的代码来实现这一功能:
```
data: {
buttons: [
{
name: '按钮1',
selected: false
},
{
name: '按钮2',
selected: false
},
{
name: '按钮3',
selected: false
}
]
},
methods: {
toggleButton: function(index) {
this.buttons[index].selected = !this.buttons[index].selected;
}
}
```
然后,在您的页面中,您可以使用类似下面的代码来渲染按钮:
```
<view wx:for="{{buttons}}" wx:key="{{index}}">
<button class="{{item.selected ? 'selected' : ''}}" bindtap="toggleButton({{index}})">{{item.name}}</button>
</view>
```
在样式表中,您可以为“selected”类设置所需的背景颜色。
相关问题
小程序多个div点击其中一个变色
小程序中要实现多个div点击其中一个变色,可以按照以下步骤进行:
1. 在wxml文件中,使用<view>标签定义多个div,并设置相应的class和点击事件,如下所示:
```xml
<view class="div-item" bindtap="changeColor" data-index="0"></view>
<view class="div-item" bindtap="changeColor" data-index="1"></view>
<view class="div-item" bindtap="changeColor" data-index="2"></view>
```
这里给每个div都添加了一个class,用于CSS样式设置,并设置了相同的点击事件和data-index属性,用于区分不同的div。
2. 在对应的js文件中,编写相应的事件处理函数changeColor,通过data中的index参数获取点击的div的索引值,并修改对应的样式,如下所示:
```javascript
Page({
changeColor: function(e) {
var index = e.currentTarget.dataset.index;
var className = "div-item-" + index;
this.setData({
[className]: "div-active"
});
}
})
```
这里使用了事件对象e的currentTarget属性获取当前点击的div,通过dataset属性获取data-index的值,然后通过setData函数更新对应div的样式。
3. 在对应的wxss文件中,设置div的初始样式和点击后的样式,如下所示:
```css
.div-item {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
.div-active {
background-color: #f00;
}
```
这里设置了.div-item类的初始样式,包括宽度、高度、背景颜色等,以及.div-active类的点击后样式,修改背景颜色为红色。
通过以上步骤,就可以实现小程序中多个div点击其中一个变色的效果。
vant 中三个按钮被选中的按钮变色
在 Vant 中,可以使用 `van-button-group` 组件结合 `van-button` 组件来实现多选按钮的效果。当选中某个按钮时,可以通过 `active` 属性来标记该按钮被选中。因此,可以通过 CSS 来实现选中按钮的变色效果。
假设我们有如下的 HTML 代码:
```html
<van-button-group>
<van-button :active="true">按钮1</van-button>
<van-button>按钮2</van-button>
<van-button :active="true">按钮3</van-button>
</van-button-group>
```
我们可以使用如下的 CSS 代码来将被选中的按钮变色:
```css
/* 默认颜色 */
.van-button {
background-color: #fff;
}
/* 被选中的按钮颜色 */
.van-button--active {
background-color: #f00;
}
```
这样,当按钮被选中时,其背景色会变成红色。