結合溫泉用戶界面滑動菜單和標籤欄

我搜索，並沒有真正找到正確的答案。結合溫泉用戶界面滑動菜單和標籤欄

我在左上方有'全菜單'的滑動菜單，但我也希望頂部的標籤欄突出顯示3或4個特定的鏈接/頁面。我如何讓他們都工作？當我將標籤欄放在我的腳本中時，滑動菜單無法正常工作。

來源

2014-12-06 Mark B

我知道這已經很長時間了，但是你有答案嗎？你可以選擇一個最佳答案，或者你可以提供你自己的答案。問候 - Ranjith – 2015-04-28 11:59:53

首先，使用TabBar元件設計成顯示，默認情況下，在頁面的底部：

http://onsen.io/guide/overview.html#onstabbaroverview

您可以通過使用屬性position="top"

更改此位置

關於組合滑動菜單+ tabbar我沒有任何問題將兩個元素放在一起。嘗試創建一個新的溫泉UI滑動菜單項目和修改文件menu.html這樣：

<ons-navigator> 
 
     <ons-page> 
 
      <ons-tabbar position="top"> 
 
       <ons-tab page="home.html" active="true"> 
 
        <ons-icon icon="ion-home"></ons-icon> 
 
        <span style="font-size: 14px">Home</span> 
 
       </ons-tab> 
 
       <ons-tab page="fav.html" active="true"> 
 
        <ons-icon icon="ion-star"></ons-icon> 
 
        <span style="font-size: 14px">Favorites</span> 
 
       </ons-tab> 
 
       <ons-tab page="settings.html" active="true"> 
 
        <ons-icon icon="ion-gear-a"></ons-icon> 
 
        <span style="font-size: 14px">Settings</span> 
 
       </ons-tab> 
 
      </ons-tabbar>  
 
      
 
    
 
      <div style="text-align: center"> 
 
       <h1>Page 1</h1> 
 
       <ons-button 
 
        ng-click="app.slidingMenu.toggleMenu()"> 
 
        Toggle Menu 
 
       </ons-button> 
 
    
 
       <p> Click "Toggle Menu" to close/open menu, </p> 
 
       <p> You can also swipe the page left/right. </p> 
 
       <img src="images/ico_swipe_right_s.png" alt=""> 
 
      </div> 
 
     </ons-page> 
 
    </ons-navigator>

我想後您的屏幕，但我仍不很沒有足夠的聲譽

來源

2015-01-19 09:53:18

我認爲它是結合ons-navigator和ons-tabbar，而不是ons-sliding-menu和ons-tabbar？ – Tamura 2015-01-19 10:15:31

實現滑動和tabbar沒有問題。

<ons-sliding-menu 
        main-page="page1.html" 
        menu-page="menu.html"  
        side="left" 
        max-slide-distance="250px" 
        var="menu"> 
</ons-sliding-menu> 

<ons-template id="page1.html"> 
    <ons-page> 
    <ons-toolbar> 
     <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button> 
     </div> 
     <div class="center">Page 1</div> 
    </ons-toolbar> 
<ons-tabbar position="top"> 
    <ons-tab page="home.html" active="true"> 
    <ons-icon icon="ion-home"></ons-icon> 
    <span style="font-size: 14px">Home</span> 
    </ons-tab> 
    <ons-tab page="fav.html" active="true"> 
    <ons-icon icon="ion-star"></ons-icon> 
    <span style="font-size: 14px">Favorites</span> 
    </ons-tab> 
    <ons-tab page="settings.html" active="true"> 
    <ons-icon icon="ion-gear-a"></ons-icon> 
    <span style="font-size: 14px">Settings</span> 
    </ons-tab> 
</ons-tabbar> 

<ons-template id="home.html"> 
    <ons-page> 
    <p style="text-align:center">Home Page</p> 
    </ons-page 
</ons-template> 

<ons-template id="fav.html"> 
    <ons-page> 
    <p style="text-align:center">Favorites page</p> 
    </ons-page 
</ons-template> 

<ons-template id="settings.html"> 
    <ons-page> 
    <p style="text-align:center">Settings Page</p> 
    </ons-page 
</ons-template> 
    </ons-page> 
</ons-template> 


<ons-template id="menu.html"> 
    <ons-list> 
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})"> 
     page1.html 
    </ons-list-item> 
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('fav.html', {closeMenu: true})"> 
     page2.html 
    </ons-list-item> 
    </ons-list> 
</ons-template>

希望這會有所幫助。檢查我的工作codepen

來源

2015-01-20 11:05:17

結合溫泉用戶界面滑動菜單和標籤欄

回答

相關問題