ionic 2:如何实现固定的顶部面板
ionic 2: How to implement a fixed top panel
我需要在页面顶部的面板中显示视频。视频在下面的滚动离子列表中被选中。我已经尝试过 ion-card,但它会随着列表向上滚动。代码如下所示,我使用 ion-card img 而不是视频进行测试。玩 CSS (position:fixed) 并没有多大帮助。
<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>
阅读ionic 2文档后,我发现ion-toolbar总是在ion-content区域的顶部。离子工具栏的最小高度设置为 50 是离子 css。我使用 class 将最小高度覆盖为我需要的大小。它运作良好。我在工具栏中插入了视频元素。
我需要在页面顶部的面板中显示视频。视频在下面的滚动离子列表中被选中。我已经尝试过 ion-card,但它会随着列表向上滚动。代码如下所示,我使用 ion-card img 而不是视频进行测试。玩 CSS (position:fixed) 并没有多大帮助。
<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>
阅读ionic 2文档后,我发现ion-toolbar总是在ion-content区域的顶部。离子工具栏的最小高度设置为 50 是离子 css。我使用 class 将最小高度覆盖为我需要的大小。它运作良好。我在工具栏中插入了视频元素。