我想要构建这样的一个界面效果，头部选项卡选择使用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:"默认选项值"})
