image.png

wxml

<view class="box">
    <view wx:for="{{ list }}" wx:key="id" class='item {{item.id===selectedId&&"act"}}' data-selected-id="{{item.id}}" catchtap='click'>{{item.text}}</view>
</view>

wxss

.box {
    display: flex;
    flex-wrap: wrap;
}

.item {
    margin: 20rpx;
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #000000;
}

.act {
    background-color: #03a9f4;
    color: #ffffff;
}

wxss

const app = getApp()

Page({
    data: {
        selectedId: 0
    },

    onLoad() {
        const list = [];
        for (let i = 0; i < 20; i++) {
            list.push({
                id: i,
                text: i
            })
        }
        this.setData({
            list
        });
    },

    click({currentTarget:{dataset}}){
        this.setData(dataset);
    }
})