应在跳转发起页调用uni.showloading()后执行uni.navigateto()，目标页在onload请求成功后调用uni.hideloading()；需用计数器封装防嵌套误关，禁用app.vue路由监听因多端时机不可控。
uni-app 页面跳转时如何触发全局 Loading？
页面跳转本身不自动触发 loading，必须手动干预。常见错误是只在 API 请求里加 uni.showLoading()，结果页面白屏几秒却没提示——因为 uni.navigateTo() 是同步调用，但目标页面的 onLoad 或数据请求是异步的，中间存在“空窗期”。
正确做法是在跳转前显式开启 loading，并在目标页真正就绪（比如数据加载完成、DOM 渲染完毕）后关闭。不能依赖 onShow 或 onReady，它们不等数据。
- 跳转发起页：调用
uni.showLoading({ mask: true })后再执行uni.navigateTo() - 目标页：在
onLoad中发请求，success回调里调用uni.hideLoading()；若需等 DOM 渲染（如使用uni.createSelectorQuery()），可用setTimeout(() => { uni.hideLoading() }, 16)微调 - 务必配对使用：每次
showLoading都要有对应hideLoading，否则 loading 会残留。可封装一个带计数器的loadingManager防止嵌套跳转时误关
为什么直接在 App.vue 里监听路由变化加 loading 不可靠？
uni-app 的路由系统（尤其是 H5 端）不提供标准的路由守卫（如 Vue Router 的 beforeEach），onLaunch 和 onShow 无法精确捕获页面切换瞬间。更关键的是：页面卸载（onUnload）和新页创建（onLoad）之间无明确时序保证，容易导致 loading 提前关闭或卡死。
实测发现，在微信小程序中，从 A 页跳 B 页时，A 的 onUnload 可能晚于 B 的 onLoad 执行；而在 H5 端，onShow 触发时机受浏览器渲染队列影响，不可控。
- 不要在
App.vue的onShow里统一showLoading—— 它会在所有页面显示时都触发，包括后台切前台 - 避免用
getCurrentPages()监听栈变化做判断 —— 多端兼容差，iOS 小程序返回时栈顺序不稳定 - 真正可控的时机只有两个：跳转发起点（主动控制）、目标页数据就绪点（被动响应）
封装全局 loading 工具函数要注意哪些坑？
看似简单的 showLoading/hideLoading 组合，实际在多端运行时有隐藏陷阱。最典型的是：H5 端连续快速跳转时，uni.hideLoading() 可能报错 “hideLoading is not currently showing”，而小程序端则可能因异步延迟导致 loading 残留。
推荐封装一个带状态检查和防抖的工具：
export const loading = {
count: 0,
show(title = '加载中') {
if (this.count === 0) {
uni.showLoading({ title, mask: true })
}
this.count++
},
hide() {
if (this.count > 0) {
this.count--
if (this.count === 0) {
// 加一层 try-catch 防止 H5 报错
try {
uni.hideLoading()
} catch (e) {
// 忽略 hideLoading 未激活的错误
}
}
}
}
}
-
count计数比布尔值更安全，支持嵌套跳转和并发请求 - H5 端
uni.hideLoading()报错无需处理，但必须捕获，否则中断 JS 执行 - 不要给
showLoading设固定duration—— 它会强制延时关闭，与真实数据流脱节
自定义 loading 组件和原生 uni.showLoading 能否混用？
不能混用。原生 API 和自定义组件的生命周期、z-index 层级、遮罩行为完全独立。例如：先调 uni.showLoading()，再挂载自定义 <global-loading></global-loading>，会导致双层蒙版叠加，且关闭逻辑无法同步。
选择一种方案并贯彻到底：
- 用原生 API：轻量、多端一致、无需额外组件，适合简单提示
- 用自定义组件：可定制动画、文字、颜色、位置（如居中大弹窗），但需手动管理
v-show或v-if+ Vuex/Pinia 状态，且要确保 z-index > 9999 - 混合方案风险极高：比如用原生做遮罩，自定义组件做动画图标 —— 在 iOS 小程序上，原生遮罩会截断自定义组件的 touch 事件
真正难的不是实现，而是让 loading 的起始和结束时刻，严丝合缝地贴合用户感知的“等待区间”。这个区间不在代码行里，而在用户眼睛盯住屏幕的那几百毫秒中。
