uni-app 页面切换时出现闪白屏问题
uni-app 页面切换时出现闪白屏问题
操作步骤：
运行代码后，点击首页的跳转按钮，跳转页面的时候会有白色的闪屏
预期结果：
不想要那个白色闪屏，体验太差了
实际结果：
有白色的闪屏
bug描述：
深色主题，使用 uni.navigateTo 跳转第一次跳转过去后会有白色的闪屏，如果再次跳转就没有了，如果第四次跳转又会有白色的闪屏
效果视频在附件里面，代码也在附件里面，望解答
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本 | Windows10 64位 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.4.7 |
| 手机系统 | Android |
| 手机系统版本 | Android 10 |
| 手机厂商 | 荣耀 |
| 手机机型 | X10 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
8 回复
在 uni-app 开发中，页面切换时出现闪白屏问题，通常是由于页面加载或渲染过程中的延迟导致的。以下是一些常见的解决方案，帮助你减少或避免闪白屏问题：
1. 优化页面加载速度
- 减少页面初始化逻辑：检查页面的
onLoad或created生命周期函数，避免执行耗时操作（如大量计算、网络请求等）。 - 懒加载数据：将非关键数据的加载延迟到页面渲染完成后进行。
- 使用分包加载：如果项目较大，可以将部分页面放到分包中，减少主包的体积，加快页面加载速度。
2. 使用页面预加载
uni-app 提供了 uni.preloadPage 方法，可以在当前页面预加载目标页面，减少切换时的延迟。
uni.preloadPage({
url: '/pages/targetPage/targetPage'
});在需要预加载的地方调用该方法，可以提前加载目标页面，减少切换时的白屏时间。
3. 启用页面过渡动画
uni-app 默认支持页面切换动画，可以通过配置 app-plus 的 animationType 和 animationDuration 来优化页面切换效果。
{
"app-plus": {
"animationType": "slide-in-right",
"animationDuration": 200
}
}