无法结合 Onsen UI ons-sliding-menu 和 ons-tabbar

【问题标题】：Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar无法结合 Onsen UI ons-sliding-menu 和 ons-tabbar
【发布时间】：2014-04-23 11:49:16
【问题描述】：

在结合 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 后，滑块菜单停止工作。

还有更复杂的例子吗？

【问题讨论】：

标签： css angularjs cordova topcoat onsen-ui

【解决方案1】：

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

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

【讨论】：