Avoid flickering view title with Ionicframework and Android

    For several days I was facing a strange behavior when navigating in my app, especially on Android devices and simulator (I think transitions are different with iOS).

    Basically I have a header with always the same string in it (app title) and a subheader with a set of 3 tabs. When I was navigating from one tab to another it was like the app was reloading the view title : the feeling was really sluggish...

    On each tabs I had a :

    <ion-view view-title="Title">
      <ion-nav-buttons side="right">
        <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
        </button>
      </ion-nav-buttons>

    To get rid of this flickering/reloading behavior, I deleted those lines in each tabs.

    Then in the index.html, inside the ion-nav-bar directive I added :

    <ion-nav-back-button></ion-nav-back-button>
          <ion-nav-title>Title</ion-nav-title>
          <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
            </button>
          </ion-nav-buttons>

    Don't forget to add some controllers to deal with events such as the ng-click here.

    No more flickering.

     

    Print Email