Ionic 和 Angular 应用程序，底部选项卡阻止内容和滚动

Question

我有一个 Ionic 和 Angular 应用程序，当我在页面底部（离子内容之外）添加标签时，滚动停止在离子内容和离子内容内部的 fab 按钮内工作, 覆盖标签。

我怎样才能做到这一点，我已经尝试将它移动到 ion-content 中，这只会导致我的图标中间有一个标签栏随着滚动而移动。

这是我的代码：

<ion-content>

  <ion-tabs>
    <ion-tab-bar slot="top" 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>
  </ion-tabs>,

  <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>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</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>

Answer 1

在应用中使用标签进行导航的最佳方式是使用模板“标签”创建应用

ionic start appName tabs

您可以阅读有关创建here 和标签here 的更多信息。