2

我需要在页面顶部的面板中显示视频。该视频是在下面的滚动离子列表中选择的。我已经尝试过 ion-card ，但它会随着列表向上滚动。代码如下所示，我使用离子卡 img 而不是视频进行测试。使用 CSS（位置：固定）并没有多大帮助。

<ion-navbar *navbar>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Lists</ion-title>
</ion-navbar>

<ion-content>
    <ion-card>
        <div id="fixedOnTop">
            <img src="img/adam.jpg"/>
            <ion-card-content>
                <h2 class="card-title">
                    Video Panel
                </h2>
            </ion-card-content>
        </div>
    <ion-list id="belowCard">
        <button ion-item *ngFor="#item of items" (click)="itemTapped($event, item)">
            <ion-avatar item-left>
                <img src={{item.icon}}>
            </ion-avatar>
            {{item.title}}
            <div class="item-note" item-right>
                {{item.note}}
            </div>
        </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>

</ion-card>

4

1 回答 1

2

阅读 ionic 2 文档后，我发现 ion-toolbar 始终位于 ion-content 区域的顶部。离子工具栏的最小高度为 50 集是离子 css。我使用一个类将最小高度覆盖为我需要的大小。它工作得很好。我在工具栏中插入了视频元素。

于 2016-02-15T02:22:24.207 回答