微信小程序> 小程序动态添加class样式

小程序动态添加class样式

浏览量:7375 时间: 来源:很奴隶的一枚程序猿

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

小程序
点选哪个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

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值!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎