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 delay
setTimeout(() => {
this.isLoading = false;
}, 2000); // Replace with your actual data loading logic
}
}
</script>

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

结束～

好了，以上就是四步实现uniapp自定义加载，很简单的，相信你也可以的，如有不懂，可以随时提问一起进步！
下期见！！～

原文地址：https://blog.csdn.net/qq_37523448/article/details/140434727

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！