uniapp中loading加载组件原来都这样写 (附多个loading组件gif加载图）

最新推荐文章于 2024-04-18 06:58:52 发布

置顶

一个喜欢简单的前端

最新推荐文章于 2024-04-18 06:58:52 发布

阅读量1.9k

点赞数 2

分类专栏：前端uniapp常用功能学习文章标签： uni-app html 前端 javascript css

本文链接：https://blog.csdn.net/m0_61384071/article/details/126745378

版权

效果图如下图，样式可根据需求自行调整

loading加载组件

<!-- 
	loding组件
	props：
	event:
 -->
<template>
	<view class="kr-loading" v-if="isShow">
		<view class="head" v-if="isMask" @tap.stop.prevent="handleStop">
			
		</view>
		<view class="body">
			<view>
				<image src="/static/krui/images/loading.gif" mode="aspectFill" class="image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"kr-loading",
		props: {
			
		},
		data() {
			return {
				isShow: false,	// 是否展示
				isMask: false,	//