Ionic RC.0 Tab select issue


#1

Hi everyone

I’m using ionic tabs and have an issue when trying to select specific tab dynamically.
My application consists of welcome screen, with four buttons, and tabs navigation with four tab pages.

Welcome screen doesn’t contain tab navigation and each of four buttons redirects to specific page inside tab menu.
In other words user can select specific tab from the welcome page.

My problem is when selecting a specific tab I always see the first tab page for one moment and after that application goes to selected tab.
So I have a flickering effect at the beginning of transition. This wasn’t the case in Ionic beta-11 and it appeared to be in Ionic RC-0.

NOTE: WelcomePage and TabsPage are in the same navigation stack.

Here’s the short version of my code:

export class WelcomePage {
  public goToPage(page) : void {
    this.nav.push(TabsPage, { page }, { animate: false });
  }
}


export class TabsPage {
  @ViewChild('tabs') tabsRef: Tabs;

  ionViewWillEnter() {
    let page = this.navParams.get('page');
    this.tabsRef.select(page); 
  }
}

I also tried with some other hooks but nothing.

Thanks


#2

If I understand correctly, what bother you is the fact that there is an animation after selecting the tab right?

Didn’t try myself, but maybe could you try:

this.tabsRef.select(page, {animate: false});

#3

Hi @reedrichards

Thanks for your response.

Animation is not the problem.
When I click on the button, in welcome page, it should redirect to specific tab page directly. The problem is that before displaying a selected page, the tab0 page is shown and after that the user is redirected to selected page.

Tab0 page is visible for very short period and it creates a feeling of flicker effect.
Tab0 page is default root tab page and Ionic always displays it no matter which page user selects.

I also experienced this in Ionic beta-11 when defining a page template as external html file. Once I included the template inside page component file the transition started working normally.
It is very strange and I can’t figure out where’s the problem.


#5

I removed my comment, actually I just tested again and I also see a small glitch when using this.tabsRef.select() aka same as yours. The first tab is display for half a second before going to the tab I want.


#6

I also tried with this.nav.setRoot() instead of this.nav.push() function but it’s the same thing.
I think this is a big issue and application can’t be deployed with such user experience.


#7

Well then sorry, can’t help you more. Maybe someone else, hope so


#8

Hi guys

I opened an issue on Github and I hope Ionic team will find a solution: https://github.com/driftyco/ionic/issues/8610

Here’s a Plunker link as well: http://plnkr.co/edit/x2ShAmkJWidx3pRrJQAN?p=preview

@reedrichards thx for help


#9

Thx for opening an issue and plunker!