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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容