uni-app 部分android机型页面跳转后原页面图片仍显示并闪动

uni-app 部分android机型页面跳转后原页面图片仍显示并闪动

开发环境 版本号 项目创建方式
Mac 最新 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Mac

HBuilderX类型：
正式

HBuilderX版本号：
3.2.2

手机系统：
Android

手机系统版本号：
Android 10

手机厂商：
OPPO

手机机型：
R11 R15 部分华为手机

页面类型：
nvue

打包方式：
云端

App下载地址或H5网址：
掌上大学，应用宝和其他各大市场均可下载

操作步骤：
点击页面跳转，新出现的页面出现透明的情况

预期结果：
新页面完全将老页面覆盖

实际结果：
新页面透明，且出现闪动

bug描述：
部分页面切换之后，原先的页面中的图片等还是会显示，影响较大。原先页面使用了lottie插件

6542f1efee3f3f0b2b525c1290c93c5a.mov_.zip


更多关于uni-app 部分android机型页面跳转后原页面图片仍显示并闪动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 部分android机型页面跳转后原页面图片仍显示并闪动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于Android系统层级的渲染机制导致的，尤其是在部分OPPO、华为等机型上，当页面使用nvue并涉及复杂动画（如Lottie）时，系统可能未能及时回收原页面的渲染资源，导致页面跳转后旧页面内容（如图片）仍短暂残留，出现闪烁或透明现象。

主要原因：

  1. GPU渲染缓存未及时释放：部分Android机型对nvue页面的GPU渲染层处理较慢，跳转时旧页面纹理未立即清除。
  2. Lottie动画资源占用：若原页面使用了Lottie，其动画可能持有独立渲染层，切换页面时资源释放延迟。
  3. 页面过渡动画冲突：默认的页面跳转动画可能与机型兼容性不佳，加剧闪烁。

解决方案：

  1. 强制页面重绘：
    在跳转前调用uni.reLaunch或uni.navigateBack时，可尝试先隐藏原页面元素（如设置v-if或display:none），或跳转后对新页面执行this.$forceUpdate()。

  2. 禁用页面过渡动画：
    在跳转时关闭动画，减少渲染冲突：

    uni.navigateTo({
    url: 'new-page',
    animationType: 'none',
    animationDuration: 0
});

  3. 优化Lottie资源释放：
    在页面onUnload或beforeDestroy生命周期中，手动销毁Lottie实例：

    onUnload() {
    this.lottieAnimation.destroy(); // 若使用lottie-uniapp插件
}

  4. 使用image组件替代背景图：
    若残留内容为背景图片，改用<image>标签并设置position:fixed，可减少渲染层级问题。

  5. 升级HBuilderX及基础库：
    确保使用最新稳定版HBuilderX（当前为3.6+），并更新项目中的nativeplugins和uni_modules依赖。

  6. 针对机型适配：
    在pages.json中为问题机型单独配置页面跳转无动画：

    "style": {
    "androidNavigationBar": "false",
    "animationType": "pop-in"
}
回到顶部