组件在Ionic 3中重叠，试图创建可滚动的标签页

Question

我正在尝试构建可滚动的Tab，但是我可以看到组件彼此重叠，这意味着某些元素未显示在页面中。尽管它在窗口中可用。

    <ion-content>

      <ion-tabs class="tabs-positive" tabsPlacement="top" tabsHighlight="true" show="true">
        <ion-scroll scrollX="true">
            <ion-tab tabTitle="{{item.name}}" *ngFor="let item of api?.parentMenu" (ionSelect)="openPage(item.id)">{{item.name}}</ion-tab>
        </ion-scroll>
      </ion-tabs>

      <ion-refresher (ionRefresh)="getPosts($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>

      <ion-card (click)="openDetail(items[0])">
          <img src="{{getImageSource(items[0])}}" />
          <ion-card-content>
            <ion-row>
              <p ion-text color="dark">
                <ion-icon name="time"></ion-icon>&nbsp;&nbsp;
                {{items[0]?.date | date: "MMM, dd yyyy hh:mm a" }} IST
              </p>
            </ion-row>
            <ion-card-title>
              <h3 ion-text color="dark" [innerHTML]="items[0]?.title.rendered"></h3>
            </ion-card-title>
            <p ion-text color="light" [innerHTML]="items[0]?.excerpt?.rendered"></p>
          </ion-card-content>
      </ion-card>

      <ion-list>
        <button ion-item *ngFor="let post of items; let i=index" (click)="openDetail(post)">
          <ion-thumbnail item-left>
            <img src="{{getImageSource(post)}}" />
          </ion-thumbnail>
          <h3 [innerHTML]="post.title.rendered"></h3>
          <p ion-text color="light" [innerHTML]="post.excerpt.rendered"></p>
          <ion-row>
            <ion-badge ion-text color="light" *ngIf="getCatName(post.categories[0])">
              {{getCatName(post.categories[0])}}
            </ion-badge>
            <ion-row ion-text color="dark">
              <div ion-icon name="time">
                {{post.date | date: "MMM, dd yyyy hh:mm a" }} IST </div>
            </ion-row>
          </ion-row>
        </button>
      </ion-list>

      <div *ngIf="isLoading && page==1" text-center padding>
        <ion-spinner></ion-spinner>
      </div>
      <ion-infinite-scroll (ionInfinite)="getPosts($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>

openPage（id）函数代码

    openPage(cat_id:number = 0){

            if(this.navParams.get("cat_id")!=null && this.navParams.get("cat_id")!=undefined){
                this.category_id=this.navParams.get("cat_id");
            }
            this.navCtrl.setRoot(HomePage,{cat_id:cat_id});
        }

这是来自parentMenu的内容

[{"id":206,"name":"Breaking News","subMenu":[]},{"id":62,"name":"Top Story","subMenu":[]}