上图片,看一下想做的样式
点选哪个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值!