uni-app onLoad不触发onShow的常见原因解析

Question

在使用uni-app开发过程中，开发者常遇到页面onLoad生命周期正常触发，但onShow不随之调用的问题。该现象多见于页面配置了`disableScroll: true`或启用了自定义导航栏（customNavigation）。此外，页面栈操作不当、如通过`navigateTo`跳转后未正确返回，也可能导致onShow未被触发。另外，部分基础库版本存在兼容性问题，也会引发此异常。解决方法包括：检查页面json配置、避免误用API控制页面栈、及时更新至最新uni-app版本，并通过打印页面生命周期日志辅助调试。掌握这些排查点，有助于快速定位并解决onLoad不触发onShow的常见问题。

Answer 1

uni-app 页面 onLoad 正常触发但 onShow 不调用的问题深度解析

在 uni-app 开发中，页面生命周期函数是开发者控制页面行为的重要手段。其中 onLoad 和 onShow 是两个关键的生命周期钩子。然而，部分开发者会遇到这样的问题：页面 onLoad 正常执行，但 onShow 却没有被触发。

一、问题现象与初步排查

• 页面跳转后，onLoad 被调用，但 onShow 没有执行
• 页面显示正常，但某些初始化逻辑未生效（如数据刷新）
• 页面栈中存在多个实例，但只触发一次 onLoad

二、常见原因分析

原因类型	说明	影响范围
配置项错误	使用了 "disableScroll": true 或启用了自定义导航栏 "customNavigation": true	H5、微信小程序等平台
页面栈操作不当	使用 navigateTo 后未正确返回或重复打开同一页面	所有平台
基础库版本兼容性	uni-app 或原生框架版本过低导致生命周期管理异常	特定平台（如百度、头条小程序）

三、深入原理：生命周期机制简析

onLoad 表示页面加载完成，仅在页面首次加载时触发；而 onShow 表示页面显示出来，每次页面从隐藏变为可见时都会触发。

export default {
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  }
}

如果页面未真正“显示”出来（例如被遮挡或未进入可视区域），则 onShow 不会被调用。

四、解决方案与最佳实践

1. 检查页面 json 配置：

   {
     "navigationStyle": "custom",
     "disableScroll": true
   }

   尝试去掉这两个配置项测试是否恢复正常。
2. 避免误用页面栈 API：
   • 慎用 navigateTo 多次打开同一页面
   • 推荐使用 reLaunch 或 switchTab 控制页面切换逻辑
3. 更新 uni-app 版本：

   升级至最新稳定版可解决多数兼容性问题。

4. 添加日志辅助调试：

   onLoad() {
     console.log('onLoad called');
   },
   onShow() {
     console.log('onShow called');
   }

五、流程图展示问题定位路径

graph TD
A[开始] --> B{页面是否配置 disableScroll 或 customNavigation?}
B -- 是 --> C[尝试移除配置并测试]
B -- 否 --> D{是否使用 navigateTo 打开页面多次？}
D -- 是 --> E[改用 reLaunch 或 switchTab]
D -- 否 --> F{是否基础库版本较低？}
F -- 是 --> G[升级 uni-app 及平台 SDK]
F -- 否 --> H[打印生命周期日志进行进一步排查]