[英]ion-tabs scrolling inside ion-card element, instead of being fixed to bottom (Ionic 4)
[英]Fixed ion-card on the top of the screen Ionic 3
我试图将卡固定在屏幕顶部。 我正在尝试在<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...
所以我的疑问是,在滚动列表时如何固定第一张卡。
非常感谢。
缺省的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
放入一张卡, Subheader
执行以下操作:将要设置的卡放在除离子含量之外的顶部。 在离子含量之前,请使用ion-toolbar 。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.