问题描述
我无法使用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> 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> 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> 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> Reportar Pago
</ons-list-item>
</ons-list>
</ons-page>
这篇关于在Onsen UI中使用Tab栏滑动菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!