<ion-content>在Ionic中落后于<ion-header>

Question

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px"> 
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
</ion-content>

这是<ion-content>隐藏在<ion-header>后面的代码。 我的离子版本是3.19.1。

如何解决这个问题。 我也尝试过has-header。

Answer 1

尝试在ion-content tag

中添加<ion-grid></ion-grid>

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px">
  <ion-grid>
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
  </ion-grid>
</ion-content>