Segment系统组件使用

我想要构建这样的一个界面效果，头部选项卡选择使用segment组件来制作。

image.png
在制作这个页面时，有几个点需要考虑：
1、点击头部选项卡时，下面列表如何同步改变？
2、切换到不同的选项卡，下面列表的滚动条位置不同，如何保留？
3、能否打开特定选项卡页面？

方案一（失败）

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button icon-start class="backbtn1" (click)="setRoot('office')">
                <ion-icon name="md-arrow-back"></ion-icon>
              </button>
    </ion-buttons>
    <ion-title>
      标题
    </ion-title>
  </ion-toolbar>
  <ion-toolbar color="dark" mode="md" class="exx-segment">
    <ion-segment color="light" mode="md" [(ngModel)]="type" (ionChange)="changeMode()">
      <ion-segment-button value="menu1">选择1</ion-segment-button>
      <ion-segment-button value="menu2">选择2</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-scroll [hidden]="type!='mine'" style=" height:100%;" scrollY="true">
    <div *ngFor="let p of DataMine.Rdata.list">
      <!--列表页1-->
    </div>
  </ion-scroll>

  <ion-scroll [hidden]="type!='all'" style=" height:100%;" scrollY="true">
    <div *ngFor="let p of DataMine.Rdata.list">
      <!--列表页2-->
    </div>
  </ion-scroll>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" [enabled]="!isHideInfinite">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

bug：当向上拖动后，如果想要想下拖动，返回头部时，会把ion-refresher给拉出来

方案二（成功）

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button icon-start class="backbtn1" (click)="setRoot('office')">
                <ion-icon name="md-arrow-back"></ion-icon>
              </button>
    </ion-buttons>
    <ion-title>
      标题
    </ion-title>
  </ion-toolbar>
  <ion-toolbar color="dark" mode="md" class="exx-segment">
    <ion-segment color="light" mode="md" [(ngModel)]="type" (ionChange)="changeMode()">
      <ion-segment-button value="menu1">选择1</ion-segment-button>
      <ion-segment-button value="menu2">选择2</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [hidden]="type!='mine'">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <div *ngFor="let p of DataMine.Rdata.list">
      <!--列表页1-->
    </div>

  <ion-scroll [hidden]="type!='all'" style=" height:100%;" scrollY="true">
    <div *ngFor="let p of DataMine.Rdata.list">
      <!--列表页2-->
    </div>
  </ion-scroll>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" [enabled]="!isHideInfinite">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

<ion-content [hidden]="type!='mine'">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

    <div *ngFor="let p of DataMine.Rdata.list">
      <!--列表页2-->
    </div>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" [enabled]="!isHideInfinite">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

只是这样还不够，当页面中有多个ion-content组件时，push的动画效果会出现问题，需要在app.module.ts文件中修改整站页面切换效果:

    IonicModule.forRoot(MyApp, {
      ...
      pageTransition:"md-transition"
      ...
    })

设置打开特定选项卡

//目标页面
  private type:string="all";
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    let deftype = this.navParams.get("deftype");
    if (typeof deftype != "undefined" && deftype != "") {
      this.type = deftype;
    }
  }
  
//跳转页面
this.navCtrl.push("pagename",{deftype:"默认选项值"})