首页/Ionic/列表

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

来源:  2018-04-11 11:30:43    评论:0点击:

说明

在一个页面内嵌入多一个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;
    }
  }


来源:https://blog.csdn.net/weixin_36593033/article/details/77683168
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权