uniapp 实现类似v-loading加载效果

ღ张明宇࿐

已于 2023-06-20 12:38:41 修改

阅读量2k

点赞数 2

文章标签： uni-app css css3

于 2023-04-19 19:30:17 首次发布

本文链接：https://blog.youkuaiyun.com/zmx781284440/article/details/130251370

版权

文章展示了如何在uniapp中通过创建自定义组件来实现加载动画效果，而不是使用内置的自定义指令。作者创建了一个名为uni-loading的组件，包含四个不同颜色的圆形，通过CSS动画实现了旋转和位移，从而达到加载指示器的效果。在需要的地方通过v-if和v-else控制组件的显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp不支持自定义指令。

效果图如下：

在components下创建uni-loading同名目录和文件：

<template>
   // 代写代码  weixin781284440
	<view class="com__box">
		<view class="loading">
			<view class="shape shape-1"></view>
			<view class="shape shape-2"></view>
			<view class="shape shape-3"></view>
			<view class="shape shape-4"></view>
		</view>
	</view>
</template>

<style lang="scss">
	.com__box {
		position: absolute;
		top: 35%;
		left: calc((100% - 15px)/2);
	}

	.loading {
		width: 30px;
		height: 30px;
		position: relative;
		animation: animationContainer 1s ease infinite;
	}

	.shape {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		position: absolute;
	}

	.shape-1 {
		background-color: #1875e5;
		left: 0;
		animation: animationShape1 0.5s ease infinite alternate;
	}

	.shape-2 {
		background-color: #c5523f;
		right: 0;
		animation: animationShape2 0.5s ease infinite alternate;
	}

	.shape-3 {
		background-color: #499255;
		bottom: 0;
		animation: animationShape3 0.5s ease infinite alternate;
	}

	.shape-4 {
		background-color: #f2b736;
		right: 0;
		bottom: 0;
		animation: animationShape4 0.5s ease infinite alternate;
	}

	@keyframes animationContainer {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes animationShape1 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(20px, 20px);
		}
	}

	@keyframes animationShape2 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(-20px, 20px);
		}
	}

	@keyframes animationShape3 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(20px, -20px);
		}
	}

	@keyframes animationShape4 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(-20px, -20px);
		}
	}
</style>

在需要使用的文件中引入，通过v-if和v-else去判断加载。