ionic3顶部tabs点击切换功能

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

  
    Home
  



    

        

            
                
                    

                        {{slide}}
                    
                
            
            

                
                  页面1
                
                
                  页面2
                
            
        
    

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();

  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();

  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