uni-app 安卓 15图片选择顶部被状态栏遮挡 底部 tabbar被虚拟按键遮挡

发布于 1周前 作者 yibo5220 来自 uni-app

uni-app 安卓 15图片选择顶部被状态栏遮挡 底部 tabbar被虚拟按键遮挡

产品分类

uniapp/App

开发环境与版本信息

项目 信息
PC开发环境操作系统 Mac
PC开发环境版本号 sonoma(14.6.1)
手机系统 Android
手机系统版本号 Android 15
手机厂商 小米
手机机型 小米 14,小米 15,vivoX200
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 CLI
CLI版本号 3.0.0-alpha-4030120241024001

App下载地址或H5网址

https://app.xiaomi.com/details?id=com.yqkj.chr

bug描述

图片选择顶部被状态栏遮挡,选择不了,底部 tabbar被虚拟按键遮挡 ,用自定义基座没问题,云打包就会出现类似问题

图片1 图片2

操作步骤

1

预期结果

1

实际结果

1


4 回复

没有官方大大回复下吗?我也遇到了同样的问题,安卓15


请问,问题解决了吗,我也遇到了同样的问题,怎么解决?

问题解决了吗?我也遇到同样的问题

在处理 uni-app 中安卓设备上的图片选择组件被状态栏遮挡以及底部 tabbar 被虚拟按键遮挡的问题时,可以通过调整页面的样式和布局来解决。下面我将给出一些代码示例,展示如何在 uni-app 中处理这些问题。

解决顶部被状态栏遮挡问题

首先,确保你的 manifest.json 文件中的 window 配置正确设置了 statusBarStylenavigationStyle,以及适当的 safeAreaInsetTop

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#FFFFFF",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "UniApp",
  "enablePullDownRefresh": false,
  "statusBarStyle": "dark",
  "navigationStyle": "custom", // 使用自定义导航栏
  "safeAreaInsetTop": true // 启用安全区域顶部内边距
}

在页面的样式中,可以使用 env 变量来调整顶部内边距,确保内容不会被状态栏遮挡。

/* 页面样式 */
.page-container {
  padding-top: env(safe-area-inset-top); /* 顶部内边距 */
}

解决底部 tabbar 被虚拟按键遮挡问题

对于底部 tabbar 被虚拟按键遮挡的问题,通常可以通过设置 safeAreaInsetBottom 来解决。但 uni-apptabbar 组件本身已经考虑了安全区域,如果你遇到了遮挡问题,可能需要检查你的页面布局或自定义组件。

确保 tabbar 布局正确,不超出屏幕底部安全区域:

"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    },
    // 其他 tab 项
  ]
}

在页面的自定义组件或布局中,避免固定高度或底部对齐的布局方式,让内容自适应屏幕高度。

/* 自定义组件或页面布局 */
.custom-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom); /* 底部内边距 */
  background-color: #fff;
  /* 其他样式 */
}

通过上述配置和样式调整,你应该能够解决 uni-app 在安卓设备上图片选择组件顶部被状态栏遮挡以及底部 tabbar 被虚拟按键遮挡的问题。如果问题依然存在,建议检查具体的页面布局和组件样式,确保没有额外的样式或布局错误导致的问题。

回到顶部