uni-app 安卓全面屏手机非tabBar页面显示了tabBar 点击以后闪烁

uni-app 安卓全面屏手机非tabBar页面显示了tabBar 点击以后闪烁

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：11.4
HBuilderX类型：正式
HBuilderX版本号：3.2.16
手机系统：Android
手机系统版本号：Android 10
手机厂商：华为
手机机型：KOZ-AL40
页面类型：nvue
vue版本：vue2
打包方式：离线
项目创建方式：HBuilderX

示例代码：

"tabBar":{"color":"#1C252C","selectedColor":"#4E79ED","borderStyle":"black","backgroundColor":"#ffffff","height":"50px","fontSize":"12px","iconWidth":"24px","spacing":"3px","custom":true,"list":[{"pagePath":"pages/index/index","iconPath":"static/images/common/footer_01.png","selectedIconPath":"static/images/common/footer_01_active.png","text":"首页"},{"pagePath":"pages/attendees/attendees","iconPath":"static/images/common/footer_02.png","selectedIconPath":"static/images/common/footer_02_active.png","text":"会议"},{"pagePath":"pages/sci/sci","iconPath":"static/images/common/footer_03.png","selectedIconPath":"static/images/common/footer_03_active.png","text":"sci"},{"pagePath":"pages/user/user","iconPath":"static/images/common/footer_05.png","selectedIconPath":"static/images/common/footer_05_active.png","text":"我的"}]}

更多关于uni-app 安卓全面屏手机非tabBar页面显示了tabBar 点击以后闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

KOZ-AL40这是个什么手机

更多关于uni-app 安卓全面屏手机非tabBar页面显示了tabBar 点击以后闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html


只在这个手机上这样么

华为荣耀Play5T，目前测试机只有这款有问题，猜测跟页面高度有关

这个问题通常是由于全面屏手机底部安全区域处理不当导致的。在非tabBar页面显示tabBar并点击后闪烁，主要原因是自定义tabBar在全面屏设备上的适配问题。

解决方案：

  1. 检查页面配置：确保非tabBar页面在pages.json中没有设置"disableScroll": true，这可能会影响tabBar的显示。

  2. 安全区域适配：在自定义tabBar的样式中添加安全区域处理：

.tab-bar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
回到顶部