ionic3顶部tabs点击切换功能

1、新建项目,ionic start demo tabs ,选择在Home页面做这个功能
2、在home.html页面：

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

<ion-content>
    <div class="normal-page">
        <div class='segment-box'>
            <ion-slides class="slide-title" [slidesPerView]="pageNumber" [pager]="false">
                <ion-slide *ngFor="let slide of slides; let i = index;">
                    <div (click)="onClick(i)">
                        <span class="slide-title-unit"
                            [ngClass]="{'slide-title-active': selectedIndex == i}">{{slide}}</span>
                    </div>
                </ion-slide>
            </ion-slides>
            <div class="switch-box" [ngSwitch]="selectedIndex">
                <ion-list *ngSwitchCase="0">
                  页面1
                </ion-list>
                <ion-list *ngSwitchCase="1">
                  页面2
                </ion-list>
            </div>
        </div>
    </div>
</ion-content>

home.ts文件中：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @Input("slides") slides: string[] = [];
  @Input("pageNumber") pageNumber: number = 2;
  @Output("slideClick") slideClick = new EventEmitter<number>();

  mySlideOptions;
  selectedIndex: number = 0;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ngOnInit() {
    this.mySlideOptions = {
      loop: false,
      autoplay: false,
      initialSlide: 0,
      pager: false,
      slidesPerView: this.pageNumber,
      paginationHide: true,
      paginationClickable: true
    }
    this.slides = ['页面1', '页面2']
  }
  onClick(index) {
    this.selectedIndex = index;
    this.slideClick.emit(index);
  }
}

home.scss中：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @Input("slides") slides: string[] = [];
  @Input("pageNumber") pageNumber: number = 2;
  @Output("slideClick") slideClick = new EventEmitter<number>();

  mySlideOptions;
  selectedIndex: number = 0;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ngOnInit() {
    this.mySlideOptions = {
      loop: false,
      autoplay: false,
      initialSlide: 0,
      pager: false,
      slidesPerView: this.pageNumber,
      paginationHide: true,
      paginationClickable: true
    }
    this.slides = ['页面1', '页面2']
  }
  onClick(index) {
    this.selectedIndex = index;
    this.slideClick.emit(index);
  }
}

最终展示的效果如图:

全部代码在码云: https://gitee.com/weijunw/ionic3Demo/tree/master/demo