2014-03-29 68 views
0

遇到問題結合溫泉UI組件滑動菜單和ONS-的TabBar。我想在頂部有一個滑動菜單,底部有一個圖標欄。我試過以下內容:遇到問題結合溫泉UI組件滑動菜單和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時,滑塊菜單停止工作。

有沒有更復雜的例子?

回答

4

您應該將它們分隔到自己的文件中。

在這裏,我把裏面的TabBar滑動菜單的上方頁面。您也可以根據您的UI將滑動菜單放在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>