Tab选项卡滑动点击切换ionic3+angular4

1.home.html

2.  home.ts

import { Component,ViewChild } from '@angular/core';

import { NavController,Slides } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild(Slides) slides: Slides;

index:number = 0;

constructor(public navCtrl: NavController) {

}

//添加active

goToSlide(index) {

this.slides.slideTo(index, 500);

this.addActive(index);

}

// 滑动切换

slideChanged() {

let currentIndex = this.slides.getActiveIndex();

console.log('Current index is', currentIndex);

this.addActive(currentIndex);

}

// 改变tab 颜色

addActive(index){

this.index = index;

console.log(index)

}

}

export class AppComponent { }

参考ionic3官方文档:https://ionicframework.com/docs/api/components/slides/Slides/