html - 弹出窗口 : Toolbar within ion-header doesn’t stay fixed

Question

我有一个带有标题和关闭按钮的弹出窗口，它应该固定在弹出窗口的顶部。为此，我将 ion-toolbar 放置在 ion-header 标签中，这应该使其固定在其位置(如有关工具栏的文档所述)。但是当内容需要滚动时，工具栏会像内容一样滚动出 View 。

我的弹窗模板:

<ion-header >
    <ion-toolbar position="top">
        <ion-button (click)="close()" slot="start" icon-only fill="clear">
            <ion-icon name="arrow-round-back"></ion-icon>
        </ion-button>
        <ion-title>{{TACName}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content >
    <ion-card  *ngIf="cardTitle" >
        <ion-card-title  class="card-title">{{cardTitle}}</ion-card-title>
    </ion-card>
    <ion-card *ngIf="cardDesc" >
        <ion-card-title  class="card-desc">{{cardDesc}}</ion-card-title>
    </ion-card>
</ion-content>

有什么想法可以让工具栏固定在弹出窗口的顶部吗？ 谢谢!

Answer 1

这是根据您的需要工作的。 ion-toolbar 中的按钮不随 ion-content 滚动。

<ion-header>
    <ion-toolbar position="top">
        <ion-buttons end>
            <button ion-button color="save">
                SAVE DRAFT
            </button>
        </ion-buttons>
        <ion-icon name="settings" style="float: left" routerLink="/settings"></ion-icon>
        <ion-title>
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <h3>All Category</h3>
    <li>
        <!-- {{category.categoryTitle}} -->
    </li>

    <ion-row>
        <ion-col size="4" *ngFor="let category of category_array">
            <ion-card>
                <ion-card-header>
                    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
                    <ion-card-title>Card Title</ion-card-title>
                </ion-card-header>

                <ion-card-content>
                    Keep close to Nature's heart... and break clear away, once in awhile,
                    and climb a mountain or spend a week in the woods. Wash your spirit clean.
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-content>