uni-app 安卓隐藏底部虚拟导航栏之后跳转到nvue页面无法占满全屏

uni-app 安卓隐藏底部虚拟导航栏之后跳转到nvue页面无法占满全屏

操作步骤：

  • 掉用plus.navigator.hideSystemNavigation()
  • 跳转到nvue页面
  • 关闭此nvue页面
  • 再次跳转到nvue页面

预期结果：

  • 无论跳转几次，在隐藏完虚拟按键导航栏之后可以占满全屏

实际结果：

  • 首次跳转可以占满全屏。之后无法占满全屏

bug描述：

在使用了plus.navigator.hideSystemNavigation()隐藏完安卓的虚拟导航栏之后。第一次跳转到nvue页面时是正常的。之后关闭nvue页面，再次跳转到同一个nvue页面，此时的nvue页面的最底部会留有虚拟按键导航栏的一个高度，无法占满全屏。之后跳转也是同样的情况。 看到一个掘金帖子https://juejin.cn/post/6845166891309203464 之后测试发现 如果禁用了navigateto的跳转动画，确实不会出现此bug，希望官方能修复下


更多关于uni-app 安卓隐藏底部虚拟导航栏之后跳转到nvue页面无法占满全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢，总算解决了

更多关于uni-app 安卓隐藏底部虚拟导航栏之后跳转到nvue页面无法占满全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发时，如果你在安卓设备上隐藏了底部的虚拟导航栏，并且在跳转到 nvue 页面后发现页面无法占满全屏，可能是因为 nvue 页面的布局方式与 vue 页面不同，导致布局没有自动适应全屏。以下是一些可能的解决方案：

1. 确保 nvue 页面布局正确

nvue 页面的布局方式与 vue 页面不同，它默认使用 flex 布局。确保你的 nvue 页面的根元素使用了 flex: 1 来占满整个屏幕。

例如：

<template>
  <view style="flex: 1">
    <!-- 你的内容 -->
  </view>
</template>

2. 使用 plus.navigator.setFullscreen 方法

在跳转到 nvue 页面之前，你可以使用 plus.navigator.setFullscreen 方法来强制全屏显示。

plus.navigator.setFullscreen(true);

你可以在 vue 页面跳转之前调用这个方法：

uni.navigateTo({
  url: '/pages/nvuePage',
  success: () => {
    plus.navigator.setFullscreen(true);
  }
});

3. 使用 manifest.json 配置

你可以在 manifest.json 中配置 fullscreen 属性，使应用在启动时即进入全屏模式。

{
  "app-plus": {
    "fullscreen": true
  }
}

4. 使用 onLaunch 生命周期钩子

如果你希望在应用启动时隐藏导航栏，可以在 App.vue 的 onLaunch 生命周期钩子中调用 plus.navigator.setFullscreen 方法。

export default {
  onLaunch() {
    plus.navigator.setFullscreen(true);
  }
}

5. 检查 nvue 页面的样式

确保 nvue 页面的样式没有设置固定的高度或边距，导致页面无法占满全屏。你可以使用 flex: 1 来确保页面占满整个屏幕。

6. 使用 nvue 页面的 onLoad 生命周期钩子

在 nvue 页面的 onLoad 生命周期钩子中调用 plus.navigator.setFullscreen 方法，以确保页面加载时进入全屏模式。

export default {
  onLoad() {
    plus.navigator.setFullscreen(true);
  }
}

7. 使用 uni.getSystemInfoSync 获取屏幕高度

你可以使用 uni.getSystemInfoSync 获取设备的屏幕高度，然后动态设置页面的高度。

const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;

export default {
  data() {
    return {
      height: windowHeight + 'px'
    };
  }
}

然后在 nvue 页面中使用这个高度：

<template>
  <view :style="{ height: height }">
    <!-- 你的内容 -->
  </view>
</template>
回到顶部