Ionic2 在页面中创建选项卡

我想在页面上创建如下选项卡：

正如您所看到的，Voortgang和pijnniveau是我在页面中的选项卡，但如果我这样设置它们：

export class ProgressPage {    
    tab1Root = HomePage;
    tab2Root = SchemaPage;

然后在我的html模板中执行以下操作：

      <ion-header>
    <ion-navbar color="light">
        <ion-title>{{viewTitle}}</ion-title>
        <ion-buttons end>
            <button ion-button [disabled]="isToday" (click)="today()">Today</button>
            <button ion-button (click)="changeMode('month')">M</button>
            <button ion-button (click)="changeMode('week')">W</button>
            <!--<button ion-button (click)="changeMode('day')">D</button>-->
            <button ion-button (click)="loadEvents()">Load Events</button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content class="has-header">  
  <!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->

    <calendar [eventSource]="eventSource"
              [calendarMode]="calendar.mode"
              [currentDate]="calendar.currentDate"
              (onCurrentDateChanged)="onCurrentDateChanged($event)"
              (onEventSelected)="onEventSelected($event)"
              (onTitleChanged)="onViewTitleChanged($event)"
              (onTimeSelected)="onTimeSelected($event)"
              step="30">
    </calendar>


  <ion-list inset>
    <ion-list-header>{{ viewTitle }}</ion-list-header>
    <ion-item>
      <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
      <p>Fysiotherapie afsrpaak</p>
    </ion-item>

    <ion-item>
      <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
      <p>Fysiotherapie afsrpaak</p>
    </ion-item>
  </ion-list>
</ion-content>


<ion-tabs color="light" tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>

{{viewTitle}}
今天
M
W
加载事件
{{viewTitle}}
Frans van Brugge 9 2017年6月
Fysiotherapie afsrpaak

Frans van Brugge 9 2017年6月
Fysiotherapie afsrpaak

但这看起来是这样的，您会看到活动页面下的

tabRoot

页面：

---

如何修复此问题？

请转到您的app.componet.ts文件并将根页面设置为ProgressPage。（如果这是应用程序的打开屏幕）

如果您正在使用登录屏幕，或者正在从另一个屏幕导航到此屏幕，请确保在navCtrl中按下ProgressPage

---

希望这对你有帮助。谢谢。

这不是关于底部选项卡的问题，这些选项卡正在工作，但现在我想在我的页面中添加两个选项卡，但不知道如何添加。。