小程序动态添加class样式

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

小程序动态添加class样式_第1张图片
点选哪个button,哪个button添加border,就是这样一个效果,上代码

js

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


     {{item.label}}

wxss

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

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

你可能感兴趣的:(小程序)