uni-app实现自定义加载动画 uni-app全局loading组件封装-uni-app-PHP中文网

app端uni.showloading不能用，因其调用原生弹窗，样式不可定制、无法覆盖状态栏/导航栏、不支持z-index和点击穿透；必须改用v-show控制的全局dom遮罩组件。

uni-app实现自定义加载动画 uni-app全局loading组件封装

App端uni.showLoading为什么不能用

因为uni.showLoading在iOS/Android真机上走的是原生弹窗通道，不是渲染层DOM，所以你写的CSS完全无效，改z-index、background、animation都没用。它默认白底黑字+转圈，卡在状态栏下面、导航栏上面，遮不住页面内容，也不支持点击穿透——这不是bug，是设计如此。

常见错误现象包括：uni.showLoading调用了但没显示（其实是被原生导航栏盖住了）、uni.hideLoading不响应（多层原生弹窗冲突）、H5里看着正常但App端全失效。

别在App端对uni.showLoading做样式覆盖尝试，100%徒劳
如果同时用了uni.showToast或uni.showModal，极大概率触发原生弹窗栈混乱，导致loading卡死
H5和小程序端可以部分定制，但App端必须换路子

怎么写一个真正可用的全局Loading组件

核心是把它做成一个常驻的<view></view>节点，用v-show控制显隐（不用v-if，避免重复挂载开销），靠position: fixed + z-index: 9999强行覆盖全屏。

关键实操点：

组件内不要用uni.showLoading，只依赖props或store驱动v-show
遮罩层必须设top: 0; left: 0; width: 100vw; height: 100vh;，否则在某些Android机型上会漏出底部内容
动画用@keyframes + transform: rotate()最稳，避免用animation: spin这种模糊命名，防止被其他CSS重置
如果用Vue 3 + Composition API，推荐用Pinia store统一管理isLoading状态，而不是app.vue的globalData（后者跨页面同步有延迟）

示例结构（components/GlobalLoading.vue）：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

<template><view v-show="isLoading" class="loading-overlay"><view class="spinner"></view><view class="text">加载中...</view></view></template><script setup>
import { useLoadingStore } from '@/store/loadingStore'
const store = useLoadingStore()
const isLoading = $computed(() => store.isLoading)
</script>

如何在请求和页面跳转时自动控制Loading

不能靠手动每个uni.navigateTo前后加show/hide，容易漏、难维护。得用拦截机制。

实操建议：

在uni.addInterceptor('request')里统一store.show()，在response和fail拦截器里调store.hide()——注意并发请求要防抖，避免多次show导致闪烁
页面跳转用uni.$on('route:start')和uni.$on('route:end')（需在app.vue中注册），比监听onLoad更及时
如果用了uni-app的easycom，确保components/GlobalLoading.vue文件名和目录名严格一致（如components/GlobalLoading/GlobalLoading.vue），否则HBuilderX可能不自动引入
别在onPullDownRefresh里单独控制loading，它和全局loading逻辑冲突，优先用store统一调度