说明
在一个页面内嵌入多一个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的indexconsole.log();if(this.tabIndex != this.slideIndex){this.slider.slideTo(this.tabIndex);//slide切换}this.change(this.tabIndex);}onSlideChanged() {this.slideIndex = this.slider.getActiveIndex();//获取当今slide的indexif(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的indexconsole.log();if(this.tabIndex != this.slideIndex){this.slider.slideTo(this.tabIndex);//slide切换}this.change(this.tabIndex);}onSlideChanged() {this.slideIndex = this.slider.getActiveIndex();//获取当今slide的indexif(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;}}
