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>