1

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>
arielcr
  • 1,663
  • 2
  • 23
  • 34

1 Answers1

2

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>
KNaito
  • 3,930
  • 2
  • 19
  • 21
  • I changed my code with yours and it worked ok, but actually what I want is to load another view (page) inside the app's content, not to change to another app tab, leaving the tab bar there. Is there a way to do this? – arielcr Sep 02 '14 at 21:35
  • Do you say that the view (page) switched by slidingMenu does not belongs to tabbar item, but the same tabbar is shown continued? Please show your application page structure. – KNaito Sep 03 '14 at 02:23
  • I just need to open a page that is listed on the sliding menu, but that page isn't on the tab bar. Is that possible? – arielcr Sep 03 '14 at 14:45
  • loadPage method load a new page with same tabbar. In the above my sample code, try barra.loadPage('newpage.html'); instead of barra.setActiveTab(0); – KNaito Sep 17 '14 at 07:20