uniapp点击按钮效果

最新推荐文章于 2024-08-24 14:42:42 发布

China-quanda

最新推荐文章于 2024-08-24 14:42:42 发布

阅读量537

点赞数 1

文章标签： uni-app css3 css 前端 vue

本文链接：https://blog.csdn.net/weixin_44248187/article/details/139851835

版权

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>