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



我有一个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>

在应用程序中使用选项卡进行导航的最佳方式是使用模板创建应用程序"选项卡";

ionic start appName tabs

您可以在这里阅读更多关于创建和选项卡的信息。

最新更新