需求
- 点击按钮添加class类名（选中单个按钮）
- 再点击原先选中的，移除类名（取消选中）
代码实现
wxml
如果currentBtn等于index，类名为btn-active，反之为btn
<view class="btn-box">
<view wx:for="{{timeOptions}}" bindtap="changeTime" data-index="{{index}}" wx:key="index" class="{{currentBtn==index?'btn-active':'btn'}}">{{item}}</view>
</view>
wxss文章来源：https://www.toymoban.com/news/detail-513347.html
.btn-box{
display: flex;
justify-content: space-around;
padding: 15rpx;
}
/* 默认 不选中 */
.btn{
padding:10rpx 25rpx;
border: 1rpx solid #5677FC;
border-radius: 30rpx;
color: #5677fc;
}
/* 选中 */
.btn-active{
padding:10rpx 25rpx;
border-radius: 30rpx;
background-color: #5677FC;
color: #fff;
}
js
currentBtn等于-1 为不选中状态，等于当前点击的index则加上btn-active类名文章来源地址https://www.toymoban.com/news/detail-513347.html
data: {
timeOptions: ['北京', '上海', '广州', '深圳'],
currentBtn: -1 // -1 默认不选中
},
changeTime(e) {
if (this.data.currentBtn == e.currentTarget.dataset.index) {
// 再点一下 取消选中
this.setData({
currentBtn: -1
})
} else {
this.setData({
currentBtn: e.currentTarget.dataset.index
})
}
}
到了这里，关于微信小程序点击添加class类名，再点击移除（取消）class（即切换class类名）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
