uni-app 隐藏原生导航栏时 nvue页面usb拔插触发onresize事件导致屏幕宽高改变

uni-app 隐藏原生导航栏时 nvue页面usb拔插触发onresize事件导致屏幕宽高改变

开发环境 版本号 项目创建方式
Windows win10家庭中文版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.15

手机系统：Android

手机系统版本号：Android 7.0

手机机型：收银机平板

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：
```json
{
  "globalStyle": {
    "app-plus": {
      "titleNView": false,
      "scrollIndicator": false
    }
  }
}

操作步骤： 在page.json里设置 “titleNView”: false ，并且在nvue页面进行usb的拔插（如键盘） 会触发onresize事件，导致屏幕宽高改变。

预期结果： 触发onReisze屏幕宽高改变

实际结果： 不会触发onResize事件。

bug描述： 隐藏原生导航栏的同时，在nvue页面进行usb的拔插 会触发onresize事件，导致屏幕宽高改变。 并且触发后会导致如下问题： 1.页面渲染失效（例如切换展示的商品，点击之后无反应，但是点击事件已经执行，页面没有同步渲染）


更多关于uni-app 隐藏原生导航栏时 nvue页面usb拔插触发onresize事件导致屏幕宽高改变的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

能否提供一下设备让我们测试一下

更多关于uni-app 隐藏原生导航栏时 nvue页面usb拔插触发onresize事件导致屏幕宽高改变的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以的。

回复 Zzz1012: 有qq吗提供下

回复 DCloud_Android_ST: 1027721592

没有后续了吗？

这是一个已知的nvue页面在隐藏原生导航栏时遇到的系统级问题。

当titleNView设置为false后，页面会占据整个屏幕区域。此时进行USB设备拔插操作，Android系统会重新计算屏幕可用区域，触发onresize事件。这个事件会导致nvue页面的布局重新计算，可能引起以下问题：

  1. 页面渲染失效：由于布局重新计算，页面组件的状态可能没有正确同步更新
  2. 宽高值异常：uni.getSystemInfoSync()获取的屏幕高度可能包含状态栏等区域

临时解决方案：

  1. 避免隐藏导航栏：如果可能，保留原生导航栏
  2. 监听resize事件处理：
onLoad() {
    uni.onWindowResize((res) => {
        // 手动处理布局更新
        this.$nextTick(() => {
            // 强制刷新关键组件
        })
    })
}
回到顶部