uni-app 从后台进入APP时页面会出现闪动，有时候整体高度也被拉长了

uni-app 从后台进入APP时页面会出现闪动，有时候整体高度也被拉长了

操作步骤：

  1. 打开APP，然后进行锁屏
  2. 解锁，可以看到APP上下闪动了一下，有时候闪动后正常，有时候往下闪之后不会恢复正常位置

预期结果：

从后台进入页面不出现闪动，排版一切正常

实际结果：

从后台进入页面，经常出现上下闪动，有时候向下闪动之后不会向上闪动，出现了错位

bug描述：

从后台进入APP时页面会出现闪动，有时候整体高度也被拉长了

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 Alpha
HBuilderX版本号 3.1.21
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 小米9
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 从后台进入APP时页面会出现闪动，有时候整体高度也被拉长了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 从后台进入APP时页面会出现闪动，有时候整体高度也被拉长了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的 uni-app App 平台渲染问题，通常与页面生命周期和样式渲染时机有关。问题核心在于应用从后台切换到前台时，Webview 重新渲染与原生状态恢复不同步。

主要原因和解决方案：

  1. 页面生命周期与 onShow： 应用从后台进入前台会触发页面的 onShow 生命周期。如果页面初始化或 onShow 中有动态修改样式、获取高度等异步操作，可能导致渲染过程中出现短暂布局错乱。检查 onShow 中是否有不必要的 DOM 操作或样式计算。

  2. 全局样式与 100vh 问题： 在 App 端，使用 CSS 单位 100vh 或 100% 设置页面高度时，可能会因为状态栏、导航栏等原生组件的高度变化引起页面高度被“拉长”。建议使用 CSS 的 flex 布局或固定高度替代百分比布局，或使用 uni.getSystemInfoSync().windowHeight 动态计算并设置高度。

  3. 页面滚动位置恢复： 应用进入后台时，系统可能保存了 Webview 的滚动位置，恢复时会导致页面偏移。可以在 onHide 中手动记录滚动位置，在 onShow 中重置，或尝试在页面配置中设置 "disableScroll": true（如无需滚动）。

  4. 使用 pages.json 的 style 配置： 检查 pages.json 中对应页面的 style 配置，确保 "app-plus" 下的 "bounce" 设置为 "none"，避免页面回弹效果干扰：

    "style": {
    "app-plus": {
        "bounce": "none"
    }
}
回到顶部