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>
結束～
好了，以上就是四步實現uniapp自定義加載，很簡單的，相信你也可以的，如有不懂，可以隨時提問一起進步！
下期見！！～
