uni-app 隐藏安卓底部按键后跳转页面高度没全屏

uni-app 隐藏安卓底部按键后跳转页面高度没全屏

操作步骤：

  1. 下载附件
  2. 点击页面上“进入nvue页面不是全屏”

预期结果：

1

实际结果：

点击“进入nvue页面不是全屏” 应该是全屏显示

bug描述：

初始化完成时候调用

plus.screen.lockOrientation('portrait-primary')
// 全屏
plus.navigator.setFullscreen(true)
// 隐藏底部按键
plus.navigator.hideSystemNavigation()

跳转NVUE页面之后就不会全屏

附件

test.zip

信息 描述
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 WIN7
HBuilderX类型 正式
HBuilderX版本 3.1.9
手机系统 Android
手机系统版本 Android 7.1.1
手机厂商 商米T2
手机机型 iphone6s plus
页面类型 nvue
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app 隐藏安卓底部按键后跳转页面高度没全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了么我也遇到了

更多关于uni-app 隐藏安卓底部按键后跳转页面高度没全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在Android设备上常见的全屏适配问题。当使用plus.navigator.hideSystemNavigation()隐藏底部导航栏后，页面布局高度没有及时更新导致。

解决方案：

在跳转nvue页面时，需要在目标页面的onReady生命周期中重新设置全屏状态：

onReady() {
    // 延迟执行确保页面渲染完成
    setTimeout(() => {
        plus.navigator.setFullscreen(true);
        plus.navigator.hideSystemNavigation();
    }, 100);
}

同时，在manifest.json中配置全屏模式：

"plus": {
    "fullscreen": true,
    "statusbar": {
        "immersed": true
    }
}

对于nvue页面，还需要检查页面样式是否设置了正确的flex布局：

page {
    flex: 1;
}

另外，可以尝试在页面显示时监听全屏状态变化：

onShow() {
    plus.navigator.setFullscreen(true);
}
回到顶部