Sliding menu with Tab bar in Onsen UI

2019-08-06 08:43发布

问题:

I'm having trouble making work a tabbed bar interface with a sliding menu using Onsen UI. The problem is that when I click on a item on the sliding menu, the tab bar disappears. Here is my code:

index.html

<ons-sliding-menu
    behind-page="views/menu.html" above-page="views/tab-bar.html" side="left"
    type="reveal" max-slide-distance="300px" swipable="true">
</ons-sliding-menu>  

views/menu.html

<ons-page style="background-color: white">
    <ons-list>
      <ons-list-item
        modifier="chevron"
        ng-click="ons.slidingMenu.setMainPage('views/home.html', {closeMenu: true})">
        <i class="fa fa-home fa-lg" style="color: #666"></i> &nbsp; Noticias
      </ons-list-item>
      <ons-list-item 
        modifier="chevron"
        ng-click="ons.slidingMenu.setMainPage('views/settings.html', {closeMenu: true})">
        <i class="fa fa-gear fa-lg" style="color: #666"></i> &nbsp; Reportar Pago
      </ons-list-item>
    </ons-list>
</ons-page>

views/tab-bar.html

<ons-tabbar var="barra">
    <ons-tabbar-item
      active="true"
      label="Home"
      icon="home"
      page="views/home.html">
    </ons-tabbar-item>
    <ons-tabbar-item
      label="Camera"
      icon="camera"
      page="views/camera.html">
    </ons-tabbar-item>
    <ons-tabbar-item
      label="Settings"
      icon="gear"
      page="views/settings.html">
    </ons-tabbar-item>
</ons-tabbar>

回答1:

Usually, slidingMenu is used to switch a category.
The tabbar is used to switch a sub-category.
However, in your code, slidingMenu and tabbar looks like having a same role.

In such case, slidingMenu is not necessary to work independently.
Therefore, the menu.html should be replace by

<ons-page style="background-color: white">
    <ons-list>
      <ons-list-item
        modifier="chevron"
        ng-click="barra.setActiveTab(0); app.slidingMenu.closeMenu();">
        <i class="fa fa-home fa-lg" style="color: #666"></i> &nbsp; Noticias
      </ons-list-item>
      <ons-list-item 
        modifier="chevron"
        ng-click="barra.setActiveTab(2); app.slidingMenu.closeMenu();">
        <i class="fa fa-gear fa-lg" style="color: #666"></i> &nbsp; Reportar Pago
      </ons-list-item>
    </ons-list>
</ons-page>