Two Tabbars? (One segment)
-
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!