gpt4 book ai didi

css - 在结合 Onsen UI ons-sliding-menu 和 ons-tabbar 时遇到问题

转载 作者:太空宇宙 更新时间:2023-11-03 21:42:23 25 4
gpt4 key购买 nike

在组合 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 后, slider 菜单停止工作。

有更复杂的例子吗?

最佳答案

您应该将它们分成各自的文件。

这里我把标签栏放在滑动菜单的上方页面中。您还可以根据您的 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>

关于css - 在结合 Onsen UI ons-sliding-menu 和 ons-tabbar 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22726481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com