Transition error from normal page to tabbed page

Ionic Framework ionic-v3
1

Hi, i have an issue when i go from normal page to tabbed page and vice versa.
I tried to use both push method and setRoot but I have the same problem.

Any solution?

2

If you were attempting to help this poster, what information would be useful to you?

3

Ahhhm hmmmm what problem?

4

Hi @rapropos,

Thank you for being interested in my post :slight_smile:

I will try to explain it better.

I have a home page (normal page with side menu)

image
image.jpg415×736 87.8 KB

Now if i click on button events page i have a push of Events Page.

Events Page is a tabbed page with 3 tabs and when i click on this button there is a bad transition with this page.

image
image.jpg415×737 154 KB

while if I have a push of normal page (not tabbed page) the problem doesn’t exist.

If it is not clear I’ll try to post a video!

  itemClicked(button: string) {

    switch (button) {

      case 'events':
      this.navCtrl.push(AlleventsPage);
        break;

      case 'towns':
        this.navCtrl.push(TownsPage);
        break;

      case 'places':
        this.navCtrl.push(WheretogoPage);
        break;

      case 'transfer':
        this.navCtrl.push(TransfersPage);
        break;

    }

  }

Thank you!

5

Are you attempting to push a particular subtab? If so, search the forums for “selectedIndex”. If not, look in your JavaScript console for error messages.

6

I try to push a particular subtab but doesn’t work

index.ts

  itemClicked(button: string) {

    switch (button) {

      case 'events':
        this.navCtrl.push(AlleventsPage, { index: "2" });
        break;

      case 'towns':
        this.navCtrl.push(TownsPage);
        break;

      case 'places':
        this.navCtrl.push(WheretogoPage);
        break;

      case 'transfer':
        this.navCtrl.push(TransfersPage);
        break;

    }

  }

allevents.ts

export class AlleventsPage {

  public index: any;

  tab1Root = NexteventsPage;
  tab2Root = EventsPage;
  tab3Root = PopulareventsPage;


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.index = navParams.get('index')
  }

  showCalendar() {
    this.navCtrl.push(CalendarPage)
  }

}

allevents.html

<ion-content>
  <div class="container">
    <ion-tabs tabsPlacement="bottom" selectedIndex="{{index}}">
      <ion-tab [root]="tab1Root" [tabTitle]="('NEXT EVENTS' | translate) || '&nbsp;'" tabIcon="ios-calendar"></ion-tab>
      <ion-tab [root]="tab2Root" [tabTitle]="('TODAY' | translate) || '&nbsp;'" tabIcon="ios-clock"></ion-tab>
      <ion-tab [root]="tab3Root" [tabTitle]="('POPULAR EVENTS' | translate) || '&nbsp;'" tabIcon="ios-calendar"></ion-tab>
    </ion-tabs>
  </div>
</ion-content>

Select index change correctly but i have the same bug in the transition :disappointed_relieved:

7

I try with a new blank project but i have the same result.

This is the video: https://www.dropbox.com/s/kddd52qbsie9rhf/Bug%20Tabbed%20Page.mp4?dl=0

Anyone help me? Thank You!!!

++ UPDATE ++

I try with android emulator and works correctly!

If i use chrome with ios emulator or ionic view on iOS device there is the problem!

8

If anyone have this issue can consult this link on github:

There is a workaround that could work

In the hope that it will be fixed

Thank to Ionic Dev Team