Native transitions "slide" and tabs navigation

Ionic Framework ionic-v3
2

Hi, a few days ago i have the same problem.
this is a workaround, i hope you can use it.

<ion-tabs #paymentTabs tabsPlacement='top' selectedIndex="1" (ionChange)="tabChange()">
    <ion-slides (ionSlideWillChange)="slideChange()">
      <ion-slide>
          <ion-tab [root]="profileRoot" [rootParams]="tutorial"  tabIcon="person"></ion-tab>
      </ion-slide>
      <ion-slide>
          <ion-tab [root]="homeRoot" tabIcon="custom-map-b"></ion-tab>
      </ion-slide>
      <ion-slide>
          <ion-tab [root]="wishRoot"  tabIcon="custom-bag"></ion-tab>
      </ion-slide>
    </ion-slides>
  </ion-tabs>

in the .ts just need:

 @ViewChild("paymentTabs") paymentTabs: Tabs;
  @ViewChild(Slides) slides: Slides;

slideChange(){
    //console.log(this.slides.getActiveIndex());
     if(this.slides.getActiveIndex() == 0){
        this.paymentTabs.select(0);
        this.slides.slideTo(0);
      }
      if(this.slides.getActiveIndex() == 1){
        this.paymentTabs.select(1);
        this.slides.slideTo(1);
      }
      if(this.slides.getActiveIndex() == 2){
        this.paymentTabs.select(2);
        this.slides.slideTo(2);
      }
  }

  tabChange(){
    //console.log("tabchange");
    //console.log(this.paymentTabs.getSelected().index);
    if(this.paymentTabs.getSelected().index == 0){
      this.paymentTabs.select(0);
      this.slides.slideTo(0);
    }
    if(this.paymentTabs.getSelected().index == 1){
      this.paymentTabs.select(1);
      this.slides.slideTo(1);
    }
    if(this.paymentTabs.getSelected().index == 2){
      this.paymentTabs.select(2);
      this.slides.slideTo(2);
    }
  }

I hope this can help you

1 Like