在Onsen UI中使用Tab栏滑动菜单 [英] Sliding menu with Tab bar in Onsen UI

问题描述

我无法使用Onsen UI制作带有滑动菜单的标签栏界面。问题是，当我点击滑动菜单上的项目时，标签栏消失。这是我的代码：

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 b

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

推荐答案

通常，slidingMenu用于切换类别。 br>
tabbar用于切换子类别。

但是，在您的代码中，slidingMenu和tabbar看起来具有相同的角色。

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.

在这种情况下，slidingMenu不需要独立工作。

因此，menu.html应替换为

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>

这篇关于在Onsen UI中使用Tab栏滑动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！