uni-app 大屏全屏应用隐藏虚拟导航栏后载入新窗口会自动预留虚拟导航栏位置

uni-app 大屏全屏应用隐藏虚拟导航栏后载入新窗口会自动预留虚拟导航栏位置

操作步骤：

  • 直接出现预留位置

预期结果：

  • 不出现预留位置

实际结果：

  • 出现预留位置

bug描述：

  • 大屏应用在横版全屏状态下跳转页面自动预留导航栏
信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 12.0.1
HBuilderX类型 正式
HBuilderX版本 3.3.0
手机系统 Android
手机系统版本 Android 6.0
手机厂商 联想
手机机型 平板电脑
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

下载demo.zip


更多关于uni-app 大屏全屏应用隐藏虚拟导航栏后载入新窗口会自动预留虚拟导航栏位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已收到类似问题还在排查

更多关于uni-app 大屏全屏应用隐藏虚拟导航栏后载入新窗口会自动预留虚拟导航栏位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好问下排查出来了吗？

这个问题是由于Android系统在横屏全屏模式下，虚拟导航栏的显示策略导致的。在uni-app中，可以通过以下方式解决：

  1. 在App.vue的onLaunch中设置全屏模式：
onLaunch: function() {
    // #ifdef APP-PLUS
    plus.navigator.setFullscreen(true);
    // #endif
}
  1. 在需要全屏的页面中，使用沉浸式状态栏：
onLoad() {
    // #ifdef APP-PLUS
    plus.navigator.setStatusBarBackground('#000000');
    plus.navigator.setStatusBarStyle('light');
    // #endif
}
  1. 对于Android平板，可能需要额外处理： 在manifest.json中配置：
{
    "app-plus": {
        "fullscreen": true,
        "immersed": true,
        "statusbar": {
            "immersed": true
        }
    }
}
  1. 如果问题仍然存在，可以尝试在页面跳转时动态设置：
// 跳转前设置
uni.navigateTo({
    url: '/pages/target/target',
    success: () => {
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(true);
        // #endif
    }
});
回到顶部