在Onsen UI ons-sliding-menu和ons-tabbar上组合时遇到问题。我希望顶部有滑动菜单,底部有一个图标栏。我尝试过以下方法:
<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时,滑块菜单停止工作。
是否有更复杂的例子?
答案 0 :(得分:4)
您应该将它们分成自己的文件。
这里我将tabbar放在上面滑动菜单的上方。您也可以根据用户界面将滑动菜单放在tabbar中。
<强>的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>