结合Onsen UI滑动菜单和标签栏 [英] Combine Onsen UI sliding menu and tabbar

问题描述

我搜索了并没有真正找到正确的答案.

I searched and didn't really find the right answer.

我在完整菜单"的左上方有滑动菜单，但我也希望在顶部的标签栏突出显示3或4个特定的链接/页面.我怎样才能让他们都工作?当我将标签栏放在脚本中时，滑动菜单无法正常工作.

I have the sliding menu in the top left for the 'full menu' but I also want the tab bar at the top to highlight 3 or 4 specific links/pages. How can I have them both working? When I place the tabbar in my script, the sliding menu doesn't work right.

推荐答案

首先，默认情况下，Tabbar元素旨在显示在页面底部:

First of all, the Tabbar element is designed to be displayed, by default, on the bottom of the page:

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

您可以使用属性position="top"

关于组合滑动菜单+标签栏的问题，我将这两个元素放在一起没有任何问题.尝试通过以下方式创建一个新的Onsen UI滑动菜单项目并修改文件 menu.html :

For what concerns the combination sliding menu + tabbar I haven't had any problem to put the two elements together. Try to create a new Onsen UI Sliding Menu project and modify the file menu.html in this way:

<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>

我想向您发布一个屏幕，但是我仍然没有足够的声誉

I would like to post you a screen, but I still don't have enough reputation

这篇关于结合Onsen UI滑动菜单和标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！