Angular9+Ionic5环境下APK中ion-tabs底部栏部分机型截断问题

问题场景 #

使用Angular 9、Ionic 5开发的底部标签栏，在部分移动设备上出现被截断、无法完整显示的情况，相关代码如下：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="tabClicked(1, 'jobs')">
      <ion-icon [style]="selectedTabId == 1 ? 'color: #33c7ff' : ''" name="calendar-outline"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (click)="tabClicked(2, 'payments')">
      <ion-icon [style]="selectedTabId == 2 ? 'color: #33c7ff' : ''" src="assets/icon/payments.svg"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (click)="tabClicked(3, 'onewash')">
      <ion-icon [style]="selectedTabId == 3 ? 'color: #33c7ff' : ''" src="assets/icon/mop.svg"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="logout" (click)="logout()">
      <ion-icon name="log-out-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

修复方法 #

1. 适配设备安全区域

针对带有底部安全区域的设备（如iPhone系列），给标签栏添加Ionic内置的安全区域类，并补充样式确保不被截断：

<ion-tabs>
  <ion-tab-bar slot="bottom" class="ion-safe-area-bottom">
    <!-- 原有标签按钮内容保持不变 -->
  </ion-tab-bar>
</ion-tabs>

同时在global.scss中添加全局样式增强适配：

.ion-tab-bar.slot-bottom {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--ion-tab-bar-height) + env(safe-area-inset-bottom));
}

2. 修正页面布局溢出问题

检查页面根容器的样式，避免设置固定高度或隐藏溢出导致标签栏被挤压。移除类似如下错误样式：

/* 需删除的错误配置 */
ion-content {
  height: 100vh;
  overflow: hidden;
}

改用Ionic原生布局结构，让内容自动填充空间：

<ion-page>
  <ion-content class="ion-padding">
    <!-- 页面主体内容 -->
  </ion-content>
  <ion-tabs>
    <!-- 标签栏代码 -->
  </ion-tabs>
</ion-page>

3. 调整标签栏基础高度

在src/theme/variables.scss中自定义标签栏高度，预留安全区域空间：

--ion-tab-bar-height: 56px; /* 可根据设计需求调整 */

4. 规范标签栏绑定逻辑

当前代码使用自定义点击事件切换标签，建议结合Ionic原生tab属性绑定，确保布局逻辑正常：

<ion-tabs>
  <ion-tab-bar slot="bottom" class="ion-safe-area-bottom">
    <ion-tab-button tab="jobs" (click)="tabClicked(1, 'jobs')">
      <ion-icon [style]="selectedTabId == 1 ? 'color: #33c7ff' : ''" name="calendar-outline"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="payments" (click)="tabClicked(2, 'payments')">
      <ion-icon [style]="selectedTabId == 2 ? 'color: #33c7ff' : ''" src="assets/icon/payments.svg"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="onewash" (click)="tabClicked(3, 'onewash')">
      <ion-icon [style]="selectedTabId == 3 ? 'color: #33c7ff' : ''" src="assets/icon/mop.svg"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="logout" (click)="logout()">
      <ion-icon name="log-out-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
  <!-- 对应绑定的tab页面容器 -->
  <ion-tab tab="jobs"></ion-tab>
  <ion-tab tab="payments"></ion-tab>
  <ion-tab tab="onewash"></ion-tab>
  <ion-tab tab="logout"></ion-tab>
</ion-tabs>

内容的提问来源于stack exchange，提问作者Rakesh Vangari