固定离子卡在屏幕顶部的离子3
固定离子卡在屏幕顶部的离子3
提问于 2017-11-03 22:03:06
我正在试着修复屏幕顶部的一张卡。我正试着在<ion-content>上这样做，但经过几次尝试后，我没有解决它。我尝试过使用ion-fixed，但它也不起作用。
我想修复代码的这一部分：
<ion-card text-center>
<ion-card-content>
<h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
</h5>
</ion-card-content>
</ion-card>然后，它遵循一个列表：
<ion-card style="background-color:rgb(177, 55, 47);" >
<br>
<p class="titleCard">Lista de la carta</p>
<ion-card-content>
<ion-list class="accordion-list" >
<!-- First Level -->
<ion-list-header *ngFor="let item of information; let i = index" no-lines no-padding>
<!-- Toggle Button -->
<button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
<ion-icon item-left name="arrow-forward" *ngIf="!item.open"></ion-icon>
<ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
{{ item.name }}
</button>
etc...所以我的疑问是，当我滚动列表时，如何将第一张卡片放在固定的位置。
非常感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-03 22:37:53
默认情况下，ion-content具有原生滚动功能，因此您只能将ion-content更改为滚动或不滚动。解决方案(在您的情况下)将是将卡放在ion-content之外。
以块/会话为单位的离子页面结构：
<ion-header>
<ion-navbar>
<ion-title>Header</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
...
</ion-content>
<ion-footer>
...
</ion-footer>您需要做的是将一张卡放入Subheader，因此请执行以下操作:将您想要设置的卡放在ion-content之外。在使用ion-content之前，请使用ion-。
<ion-header>
<ion-navbar>
<ion-title>Header</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-card text-center>
<ion-card-content>
<h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
</h5>
</ion-card-content>
</ion-card>
</ion-toolbar>
</ion-header>
<ion-content>
THE REST OF YOUR CARDS
</ion-content>
<ion-footer>
...
</ion-footer>或者尝试添加多个标头
<ion-header>
<ion-title>Header</ion-title>
</ion-header>
<ion-header>
<ion-card text-center>
<ion-card-content>
<h5 style=" font-size: 180%;"> {{selectedItem | noneSelectedItem}}
</h5>
</ion-card-content>
</ion-card>
</ion-header>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47097649
复制相关文章
相似问题
腾讯云开发者
