安卓16 vivo手机 App底部导航栏被手机导航键遮挡 uni-app

安卓16 vivo手机 App底部导航栏被手机导航键遮挡 uni-app

操作步骤：

  • 使用原生导航栏，安卓16 vivo手机，App底部导航栏被手机导航键遮挡，只有安卓16有此问题

预期结果：

  • 导航栏不被遮挡

实际结果：

  • 导航栏被遮挡

bug描述：

  • 使用原生导航栏，安卓16 vivo手机，App底部导航栏被手机导航键遮挡，只有安卓16有此问题

附件

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 Windows 11 家庭中文版 26100.4351
HBuilderX类型 正式
HBuilderX版本号 4.66
手机系统 Android
手机系统版本号 Android 16
手机厂商 vivo
手机机型 vivo X200 pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于安卓16 vivo手机 App底部导航栏被手机导航键遮挡 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

提供一下项目和一个安装包，我这边看一下。

更多关于安卓16 vivo手机 App底部导航栏被手机导航键遮挡 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


怎么解决

APP下载地址 https://oss.freshliance.com/app/ble.html， 下载后 跳过登录，直接进入首页即可复现

同样遇到了这个问题，官方大大解决了吗

提供一下项目和一个安装包，我这边看一下。

回复 DCloud_Android_zl: 应用市场直接搜索 Tkeeper

同样遇到这个问题，手里设备是：小米手机15系列，在升级到澎湃OS3 Beta后（安卓大版本号升级为16）。在更新之前的澎湃OS2系统时候功能正常（系统底部导航和顶部电池、信号状态栏均和APP设计的顶部/底部栏目不冲突）。现在被堆叠到（系统功能的）下部，导致无法点击了。

这个问题是Android 16系统适配问题，主要是系统导航栏与App底部导航栏的布局冲突。以下是解决方案：

  1. 在pages.json中配置导航栏样式：
{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
      "safearea": {
        "bottom": {
          "offset": "auto"
        }
      }
    }
  }
}
  1. 在manifest.json中配置沉浸式状态栏：
{
  "app-plus": {
    "safearea": {
      "bottom": {
        "offset": "auto"
      }
    },
    "statusbar": {
      "immersed": true
    }
  }
}
  1. 使用CSS安全区域适配： 在需要避开底部安全区域的页面添加：
.page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
回到顶部