uni-app开发的页面跳转全局加载中

首先需要下载插件

https://ext.dcloud.net.cn/plugin?id=20613

创建加载中页面组件

<!-- 全局自定义加载中 -->
<template><view v-if="visible" class="global-loading"><!-- 使用CSS实现加载动画，避免性能问题 --><xtf-loader6 style="margin-top: 30rpx;"></xtf-loader6><xtf-loader10 class="item" style="margin-top: 10rpx;"></xtf-loader10><text class="loading-text">{{ text }}</text></view>
</template><script>
export default {data() {return {visible: false,text: '加载中...'}},methods: {show(text) {this.text = text || '加载中...'this.visible = true},hide() {this.visible = false}}
}
</script><style scoped>
.global-loading {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 1);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9999;
}.loading-spinner {display: flex;margin-bottom: 16px;
}.spinner-dot {width: 12px;height: 12px;margin: 0 6px;background-color: #007aff;border-radius: 100%;animation: spinner-bounce 1.4s infinite ease-in-out both;
}.spinner-dot:nth-child(1) {animation-delay: -0.32s;
}.spinner-dot:nth-child(2) {animation-delay: -0.16s;
}@keyframes spinner-bounce {0%, 80%, 100% { transform: scale(0);opacity: 0.5;} 40% { transform: scale(1);opacity: 1;}
}.loading-text {font-size: 14px;margin-top: 15px;color: #666;
}
</style>

这个就是那个插件里面的小组件，可以用在加载中进行显示，插件下载安装好后，就这样直接使用代码去调用，不用再多做别的配置。

app.vue页面中监听跳转

<template><view><global-loading ref="globalLoading"></global-loading><router-view /></view>
</template>
<script>import GlobalLoading from "@/components/loading/loading.vue"export default {onLaunch: function() {console.log('App Launch')// 初始化路由拦截this.setupRouterInterceptor()},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},components: { GlobalLoading },methods:{showGlobalLoading(text) {this.$refs.globalLoading.show(text)},hideGlobalLoading() {this.$refs.globalLoading.hide()},setupRouterInterceptor() {const interceptorMethods = ['navigateTo','redirectTo','reLaunch','switchTab']interceptorMethods.forEach(method => {uni.addInterceptor(method, {invoke: (args) => {this.showGlobalLoading('加载中...')return args},success: () => {// 确保页面切换完成后再隐藏setTimeout(() => {this.hideGlobalLoading()}, 1500)},fail: (err) => {this.hideGlobalLoading()console.error('导航失败:', err)},complete: () => {// 兜底确保loading关闭setTimeout(() => {this.hideGlobalLoading()}, 2000)}})})},}}
</script><style>/*每个页面公共css */
</style>

这样就可以实现页面跳转的时候进行加载中显示了！！！