Having trouble combining Onsen UI ons-sliding-menu and 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>

The slider menu stops working when the obe-tabbar is added.

Is there a more complex example?

回答1:

You should separate them into their own files.

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>

来源：https://stackoverflow.com/questions/22726481/having-trouble-combining-onsen-ui-ons-sliding-menu-and-ons-tabbar

标签

css

angularjs

cordova

topcoat

onsen-ui

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!