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

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 delaysetTimeout(() => {this.isLoading = false;}, 2000); // Replace with your actual data loading logic}}
</script><style scoped>.content {/* Your page styles */}
</style>