ionic2 使用tabs+slides实现滑动切换页面效果

说明

在一个页面内嵌入多一个tab栏（我是在HomePage中），实现在此页面中多页面的滑动切换页面

此案例也可以用于最外层的tab栏，具体如何实现自己尝试一下就知道了

实现方法

1.创建一个空的页面，即使tab跳转一个空页面；

@Component({
template: `<ion-content class="blank"></ion-content>`
})
export class BlankPage {}

2.关联tab与slide的索引值；

onTabsChange(tab: Tab) {
this.tabIndex = this.tabs.getIndex(tab);//获取当前tab的index
console.log();
if(this.tabIndex != this.slideIndex){
this.slider.slideTo(this.tabIndex);//slide切换
}
this.change(this.tabIndex);
}

onSlideChanged() {
this.slideIndex = this.slider.getActiveIndex();//获取当今slide的index

if(this.tabIndex != this.slideIndex){
this.tabs.select(this.slideIndex);//切换tab
}
this.change(this.slideIndex);
}

3.tab的个数要与slides个数相同。

效果图

主要代码

home.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {NavController, Slides, Tab, Tabs} from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
iel:any;
blank: any = BlankPage;
tabIndex: number = 0;
slideIndex: number = 0;

@ViewChild('mySlider') slider: Slides;
@ViewChild('myTabs') tabs: Tabs;
constructor(public navCtrl: NavController,
public el: ElementRef) {

}
onTabsChange(tab: Tab) {
this.tabIndex = this.tabs.getIndex(tab);//获取当前tab的index
console.log();
if(this.tabIndex != this.slideIndex){
this.slider.slideTo(this.tabIndex);//slide切换
}
this.change(this.tabIndex);
}

onSlideChanged() {
this.slideIndex = this.slider.getActiveIndex();//获取当今slide的index

if(this.tabIndex != this.slideIndex){
this.tabs.select(this.slideIndex);//切换tab
}
this.change(this.slideIndex);
}

//滑动条
change(index) {
if (index != 0) {
this.iel.style.left = '50%';
}else {
this.iel.style.left = '0';
}
}

ngOnInit() {
this.iel = this.el.nativeElement.querySelector('.navs-slider-bar');
this.iel.style.left = '0';
}

}
//创建一个空界面
@Component({
template: `<ion-content class="blank"></ion-content>`
})
export class BlankPage {}

home.html

<ion-content>
<div class="navs-slider">
<ion-tabs #myTabs tabsPlacement="top" (ionChange)="onTabsChange($event)">
<ion-tab [root]="blank" tabTitle="page1"></ion-tab>
<ion-tab [root]="blank" tabTitle="page2"></ion-tab>
</ion-tabs>
<span class="navs-slider-bar"></span>
</div>
//给margin-top是因为slides占满页面会挡住tabs
<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged()" style="margin-top: 41px;">
<ion-slide>
<not-deal></not-deal>
</ion-slide>
<ion-slide>
<deal></deal>
</ion-slide>
</ion-slides>
</ion-content>

home.scss

.navs-slider{
.navs-slider-bar {
position: absolute;
width: 30%;
background: #0f88eb;
height: 2px;
top: 40px;
left: 0;
margin: 0 10%;
transition: left .15s ease-in;
-webkit-transition: left .15s ease-in;
}
}