index.wxml
<view wx:for="{{items}}" wx:key="index">
<button
data-index="{{index}}"
bindtap="selectItem"
class="{{item.selected ? 'selected' : 'not-selected'}}">
{{item.name}}
</button>
</view>
index.js
Page({
data: {
items: [
{ name: 'Item 1', selected: false },
{ name: 'Item 2', selected: false },
{ name: 'Item 3', selected: false },
]
},
selectItem: function(event) {
const index = event.target.dataset.index;
const items = this.data.items;
items[index].selected = !items[index].selected;
this.setData({ items });
}
})
index.wxss
/* selected-item.wxss */
.selected {
background-color: #007AFF;
color: #FFFFFF;
border-radius: 10rpx;
padding: 5px;
}
.not-selected {
background-color: #FFFFFF;
color: #000000;
border-radius: 10rpx;
padding: 5px;
}