Question

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

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

视图/ 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>

视图/制表一个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>

Answer 1

通常，slidingMenu用于切换类别标签栏用于切换子类别但是，在您的代码中，slidingMenu和tabbar看起来像具有相同的角色。

在这种情况下，slideMenu不需要独立工作因此，menu.html应替换为

<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栏滑动菜单

1 个答案: