Ionic+Angular应用底部tabs遮挡内容、ion-content滚动失效问题求解

• 你在页面内同时使用了两组ion-tabs组件，页内顶部的分段导航不需要嵌套ion-tabs，多余的组件层级导致ion-content的滚动高度计算异常
• 放在ion-content外的全局底部tab栏属于固定层级，ion-content默认没有预留对应的底部安全区，导致内容底部被遮挡、滚动范围计算错误，同时固定定位的fab按钮默认紧贴ion-content底部，自然会遮挡tab栏
• 你之前把底部tabs放到ion-content内部时没有设置固定slot，所以会跟随内容滚动

1. 替换页内顶部的分段导航结构，移除多余的ion-tabs包裹，将ion-tab-bar放入ion-content的header插槽实现顶部固定
2. 给ion-content添加底部内边距，预留出底部全局tab栏的高度+设备底部安全区高度，解决滚动失效问题
3. 给固定定位的fab按钮添加底部偏移，避免遮挡底部tab栏

修改后完整代码如下：

<ion-content style="--padding-bottom: calc(56px + env(safe-area-inset-bottom));">
  <!-- 顶部分段tab放到header slot，固定不跟随滚动 -->
  <ion-tab-bar slot="header" selected-tab="ownedProjects">
    <ion-tab-button tab="ownedProjects">
      <ion-label>Owned</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="subscribers">
      <ion-label>Subscribers</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <div id="ownedProjectsCardContainer" class="ion-margin-top ion-padding-top" overflow-scroll="true">
    <ion-card *ngFor="let project of user.projects" class="ion-margin-top">
      <img width="100%" [src]="project.projectImage" />
      <ion-card-header>
        <ion-card-subtitle>{{ project.lastUpdated }} - <span class="{{ (project.status).toLowerCase() }}">{{ project.status }}</span></ion-card-subtitle>
        <ion-card-title>{{ project.name }}</ion-card-title>
        <ion-fab vertical="bottom" horizontal="end">
          <ion-fab-button>
            <ion-icon name="pencil-outline"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-card-header>
    </ion-card>

    <ng-container *ngIf="user.projects.length == 0" [ngTemplateOutlet]="noProjects"></ng-container>
  </div>

  <!-- 给fab添加底部偏移，56px是默认tab栏高度，16px是默认fab边距，可自行调整 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed" style="bottom: calc(56px + 16px + env(safe-area-inset-bottom));">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

<!-- 全局底部tabs保持在ion-content外 -->
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search-outline"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="notifications">
      <ion-icon name="notifications-outline"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>
    <ion-tab-button tab="profile">
      <ion-icon name="person-circle-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

内容的提问来源于stack exchange，提问作者Tim Rumit