固定離子卡在屏幕頂部Ionic 3

Question

我試圖將卡固定在屏幕頂部。 我正在嘗試在<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...

所以我的疑問是，在滾動列表時如何固定第一張卡。

非常感謝。

Answer 1

缺省的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>