Question

我有一个带有标题和关闭按钮的Popover，应该固定在Popover的顶部。为此，我将ion-toolbar放置在ion-header标签内，这应使其固定在其位置上（如有关Toolbars的文档所述）。但是当内容需要滚动时，工具栏的行为就像内容一样，并滚动到视图之外。

我的弹出窗口模板：

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

Answer 2

不是最佳解决方案，但可能适用于您的情况。用div替换离子头，离子含量和离子脚，并设置overflow-y：滚动；到内容div以使其可滚动。有关更多信息，请参见@davidkonrad的演示。 How to add a footer to popover and make content scrollable? Using Twitter bootstrap 3

弹出框：离子头内的工具栏未固定

2 个答案: