Two Tabbars? (One segment)

thejordancasey

Hi I’m having a slight problem with the application I’m trying to develop. Before I show you my code, I’ll try and briefly explain what I’m trying to achieve.

Explanation
I have a bottom tabbar which splits between 3 pages (Home, Explore, Me) I have a “tabbar” page which is pushed when logging into the app and it sets the active tab as “Home” and thus pushes to the home page.

Upon clicking explore, I push to a second “tabbar” page which adds another tabbar in the form of a segment navigation bar separating another 3 pages. This is only visible when the explore page is active.

When I use the explore page, the segment works fine and navigation is smooth. However, when I return to the home page from the explore page using the original tabbar (except with the first page), the home page completely freezes.

Code
(From The First Tabbar page)

<ons-tabbar id="thetabbar" position="auto">

  <ons-tab label="Home" page="page2.html" icon="ion-home" active>
  </ons-tab>
  <ons-tab label="Explore" page="beforeexplore.html" icon="ion-compass" >
  </ons-tab>
   <ons-tab label="Me" page="page4.html"  icon="ion-person"  >
  </ons-tab>
</ons-tabbar>

(From the “beforeexplore” page)
```
<div class=“center”>
<ons-segment id=“segment” tabbar-id=“tabbar2” style=“width: 300px; margin-top:5px;”>
<ons-button><strong style=“font-family:oneday2;”>Nightlife</strong></ons-button>
<ons-button><strong style=“font-family:oneday2;”>Food</strong></ons-button>
<ons-button><strong style=“font-family:oneday2;”>Leisure</strong></ons-button>
</ons-segment>
</div>
</ons-toolbar>

<ons-tabbar id=“tabbar2”>
<ons-tab page=“venueplaces.html” active></ons-tab>
<ons-tab page=“foodplaces.html”></ons-tab>
<ons-tab page=“moreplaces.html”></ons-tab>
</ons-tabbar>


Thank you!