小程序动态添加class样式

最新推荐文章于 2025-05-14 18:31:08 发布

很奴隶的一枚程序猿

最新推荐文章于 2025-05-14 18:31:08 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/qq_18846613/article/details/92811834

小程序专栏收录该内容

0 篇文章

订阅专栏

博客介绍了点击按钮添加边框效果的实现。先展示想做的样式图片，接着给出js、wxml、wxss代码。实现原理是判断点击循环输出数据的下标，修改对应数组下标里的checked值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上图片，看一下想做的样式

在这里插入图片描述
点选哪个button，哪个button添加border，就是这样一个效果，上代码

goods: [{
      label: '导游好',
      checked: false
    }, {
      label: '性价比高',
      checked: false
    }, {
      label: '没有多余购物',
      checked: false
    }, {
      label: '住宿条件好',
      checked: false
    }, {
      label: '行程路线安排好',
      checked: false
    }, {
      label: '性价比',
      checked: false
    }, {
      label: '导游好',
      checked: false
    }, {
      label: '性价比高',
      checked: false
    }, {
      label: '没有多余购物',
      checked: false
    }, {
      label: '住宿条件好',
      checked: false
    }, {
      label: '行程路线安排好',
      checked: false
    }, {
      label: '性价比',
      checked: false
    }],
    
	choose(e) {
	    let index = e.currentTarget.dataset.index
	    var bool = this.data.goods[index].checked
	    this.setData({
	      ['goods[' + index + '].checked']: !bool
	    })
	  },

wxml

<view class='evaluatepg {{item.checked ? "active" : ""}}' wx:for="{{goods}}" bindtap='choose' data-index="{{index}}">
     {{item.label}}
</view>

wxss

.evaluatepg{padding: 19rpx 27rpx;border:2rpx solid #ccc;border-radius:4rpx;margin-right: 20rpx;margin-bottom: 15rpx;}
.active{border:2rpx solid #00C7FF;}

实现的原理判断点击循环输出数据的下标，修改对应的数组下标里的checked值！