uni-app APP 切换页面闪白

页面闪白通常由以下原因导致，可针对性排查：

1. 页面层级与渲染时机

   • 检查页面结构，避免过深的嵌套或复杂计算阻塞渲染。
   • 在 onLoad 或 onShow 中执行耗时操作（如网络请求）时，页面可能先渲染空白再填充内容，建议使用加载状态或骨架屏过渡。

2. CSS 样式问题

   • 确保页面背景色与窗口背景色一致（可在 pages.json 中配置全局窗口背景色）。
   • 检查是否因样式覆盖导致元素初始渲染为白色，例如设置 page 或根节点背景色：

     page { background-color: #f5f5f5; }
     

3. 图片加载延迟

   • 图片未设置宽高或加载慢可能导致布局抖动，建议使用 loading 占位图或预加载关键图片。

4. Vue 生命周期与数据渲染

   • 数据异步获取时，模板中未定义的数据可能触发空白。可使用 v-if 控制渲染时机，或给数据设置初始值。

5. 启用原生渲染优化

   • 在 pages.json 中为页面配置 "style": { "renderingMode": "seperated" } 尝试分离渲染模式（仅限部分平台）。
   • 在 manifest.json 的 app-plus 下启用硬件加速与图层优化：

     "app-plus": {
       "optimization": { "layer": true }
     }
     

6. 使用页面过渡动画

   • 在 pages.json 中配置页面切换动画，可减少视觉突兀感：

     "animationType": "pop-in",
     "animationDuration": 200