uni-app 全屏与虚拟按键隐藏冲突求解决

uni-app 全屏与虚拟按键隐藏冲突求解决

示例代码：

onLaunch: function() {
    console.log('App Launch')
    // 全屏--去状态栏
    plus.navigator.setFullscreen(true);
    // 横屏
    plus.screen.lockOrientation("landscape-primary");
    // 隐藏虚拟按键
    plus.navigator.hideSystemNavigation();
},
onShow: function() {
    console.log('App Show')
    // 全屏--去状态栏
    plus.navigator.setFullscreen(true);
    // 横屏
    plus.screen.lockOrientation("landscape-primary");
    // 隐藏虚拟按键
    plus.navigator.hideSystemNavigation();
},
onHide: function() {
    console.log('App Hide')12
}

操作步骤：

切换页面就会出现

预期结果：

详情页完全覆盖页面，不会出现透明区域（被虚拟按键顶起的）

实际结果：

切换页面就会出现

bug描述：

设置全屏和隐藏虚拟按键之后，跳转页面，详情页底部会出现透明区域（虚拟按键所在的位置，但是虚拟按键是隐藏的，透明区域可以操作前一页的页面）

附件：


更多关于uni-app 全屏与虚拟按键隐藏冲突求解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

0-0无人么

更多关于uni-app 全屏与虚拟按键隐藏冲突求解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


页面路由切换，去掉动画的话，确实没问题。这不是有效的解决办法，去掉动画，显得切换很生硬

回复 7***@qq.com: 我没设置动画依然有这个问题。

主动监听onResize 改下高度

怎么修改页面的高度，用css来控制么

回复 7***@qq.com: 是的

回复 DCloud_Android_ST: 这算不算一个bug。因为设置了全屏，是不需要系统自带的虚拟按键，导致出现这块区域，还要手动去修改其他地方，如果可以的话，可以不可以下个版本更新掉这个问题。

加一

在uni-app中，全屏设置与虚拟按键隐藏的冲突通常是由于Android系统对沉浸式模式的兼容性问题导致的。从你的代码和描述来看，问题出现在页面切换时底部出现透明区域，这实际上是系统导航栏隐藏后的残留区域。

建议修改如下：

  1. 在页面生命周期中统一处理全屏和导航栏隐藏，而不是仅在App.vue的onLaunch和onShow中设置。在需要全屏的页面的onLoad或onShow中添加：
onShow() {
  // 设置全屏
  plus.navigator.setFullscreen(true);
  // 隐藏虚拟按键
  if (plus.os.name === 'Android') {
    plus.navigator.hideSystemNavigation();
  }
}
  1. 对于Android设备，可以尝试使用沉浸式状态栏替代完全隐藏：
// 在manifest.json中配置沉浸式状态栏
"plus": {
  "statusbar": {
    "immersed": true
  }
}
  1. 如果问题仍然存在，可能是页面布局未适配全屏模式。检查页面CSS，确保设置了：
page {
  height: 100vh;
  overflow: hidden;
}
  1. 考虑在页面切换时添加延时处理，确保全屏设置在页面渲染完成后生效：
setTimeout(() => {
  plus.navigator.setFullscreen(true);
  plus.navigator.hideSystemNavigation();
}, 100);
回到顶部