Monaca Onsen UI Discord Chat Github Repo

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!