Uniapp自定义动态加载组件(2024.7更新)

news2024/11/16 1:44:28

1.本次介绍如何使用uniapp实现自定义动态加载Loading的组件，可以gif格式，也可以mp4格式等;

编写自定义Loading组件(CustomLoader.vue)；
组件中含有“动态接收图片路径”，“10秒超时未false则自动断开关闭Loading”；
在全局main.js中进行定义导入类，在其他界面都不用导入组件了，直接调用即可；
导入图片mp4,gif到static静态资源目录下；
在控制层vue中进行调用以及实现，显示与隐藏；

如下四步即可实现

一：自定义的CustomLoader组件（CustomLoader.vue）

<template>
  <view v-if="showLoader" class="custom-loader">
    <image :src="imageSrc" alt="加载中..."></image>
    <view class="custom-loadText">加载中...</view>
  </view>
</template>

<script>
export default {
  name: 'CustomLoader',
  props: {
    imageSrc: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showLoader: true
    };
  },
  mounted() {
    // 设置定时器，在10秒后自动隐藏加载器
    setTimeout(() => {
      this.showLoader = false;
    }, 10000); // 10000 毫秒 = 10 秒
  }
};
</script>

<style scoped>
.custom-loader {
  position: fixed;
  top: 35%;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  z-index: 9999; /* 确保在其他内容上方 */
}

.custom-loader image {
  width: 260rpx;
  height: 260rpx;
}

.custom-loadText {
  text-align: center;
  font-weight: bold;
}
</style>

二：main.js文件中进行全局实现导入组件

在这里插入图片描述

import CustomLoader from './components/popup/CustomLoader.vue'; // 路径根据实际情况调整
Vue.component('CustomLoader', CustomLoader);

三：导入图片资源，static/load/…mp4

在这里插入图片描述

四：控制层界面功能的实现调用逻辑（index.vue）

在这里插入图片描述
代码区：

<template>
	<div class="content">
		<CustomLoader v-if="isLoading" :image-src="loadingImage" />
		<!-- Your page content -->
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				isLoading: true,
				loadingImage: '../../static/load/purchaseLoad.mp4' // 设置默认图片路径
			};
		},
		mounted() {
			// Simulate data loading delay
			setTimeout(() => {
				this.isLoading = false;
			}, 2000); // Replace with your actual data loading logic
		}
	}
</script>

<style scoped>
	.content {
		/* Your page styles */
	}
</style>