Ionic better performance tab structure


#1

I am trying to do tab content page with the “standard” way as suggested by the ionic template example (ionic start myproject tabs).

On the tab page, I will have the same nav bar content across all tabs content (same title & same extra buttons on the right side of nav bar). Based on the default structure, it will automatically re-render the nav bar when user clicking between tab content.

How can I have it skipping update the nav bar, but only update the tab content part and still leveraging the ionic cache system? Would this way be more performance?

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

    <!-- Dashboard Tab -->
      <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
        <ion-nav-view name="tab-dash"></ion-nav-view>
      </ion-tab>

      <!-- Chats Tab -->
      <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
        <ion-nav-view name="tab-chats"></ion-nav-view>
      </ion-tab>

      <!-- Account Tab -->
      <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
        <ion-nav-view name="tab-account"></ion-nav-view>
      </ion-tab>


    </ion-tabs>

dashboard.html

<ion-view view-title="App Name">
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-search"></button>
      </ion-nav-buttons>
      <ion-content>
        Dashboard Content
      </ion-content>
    </ion-view>

chats.html

<ion-view view-title="App Name">
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-search"></button>
      </ion-nav-buttons>
      <ion-content>
        Chats Content
      </ion-content>
    </ion-view>

account.html

<ion-view view-title="App Name">
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-search"></button>
      </ion-nav-buttons>
      <ion-content>
        Account Content
      </ion-content>
    </ion-view>