uniapp点击按钮效果

uniapp点击按钮改变按钮效果
未点击：

点击后：

在uniapp中，可以通过改变按钮的样式类来实现点击按钮后改变效果的功能。以下是一个简单的示例：

<template>
    <view class="button" hover-class="checkActive">button</view>
</template>

<style scoped lang="scss">
.button {
    font-size: 0.28rem;
    color: #fff;
    width: 2.7rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background: #a8bc6d;
    text-align: center;
    border-radius: 1rem;
    margin-left: 0.13rem;
    transition: background 0.1s ease;
}

.checkActive {
    background: #91ab45;
    box-shadow: 0upx 0upx 0upx #91ab45;
    transition: background, box-shadow 0.1s ease;
}
</style>