其结合温泉UI组件滑动菜单和ONS-的TabBar麻烦 [英] Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar
本文介绍了其结合温泉UI组件滑动菜单和ONS-的TabBar麻烦的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有结合温泉UI组件滑动菜单和ONS-的TabBar麻烦。我想有顶部的滑动菜单和在底部的图标栏。我曾尝试以下内容：
Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar. I want to have the sliding menu on the top and a icon bar at the bottom. I have tried the following:
<body>
<ons-screen>
<ons-sliding-menu
behind-page="menu.html"
above-page="navigator1.html">
</ons-sliding-menu>
<ons-tabbar>
<ons-tabbar-item
active="true"
label="Home"
icon="home"
page="navigator1.html"></ons-tabbar-item>
<ons-tabbar-item
label="Camera"
icon="camera"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
label="Settings"
icon="gear"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</ons-screen>
滑块菜单时停止加OBE-的TabBar时工作。
The slider menu stops working when the obe-tabbar is added.
有没有更复杂的例子？
推荐答案
您应该将它们放在各自的文件中。
You should separate them into their own files.
下面我把里面的TabBar滑动菜单的上方页面。你也可以把滑动菜单内的TabBar取决于你的UI。
Here i put tabbar inside sliding menu's above page. You can also put sliding-menu inside tabbar depending on your UI.
的index.html
<body>
<ons-screen page="sliding_menu.html"></ons-screen>
</body>
sliding_menu.html
<ons-sliding-menu
behind-page="menu.html"
above-page="tabbar.html">
</ons-sliding-menu>
tabbar.html
<ons-tabbar>
<ons-tabbar-item
active="true"
label="Home"
icon="home"
page="navigator1.html"></ons-tabbar-item>
<ons-tabbar-item
label="Camera"
icon="camera"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
label="Settings"
icon="gear"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
这篇关于其结合温泉UI组件滑动菜单和ONS-的TabBar麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
