Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.

    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.

    (From The First Tabbar page)

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

    (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-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>

    Thank you!