Question

我搜索过，并没有找到正确的答案。

我在左上角有一个滑动菜单，用于完整的菜单＆＃39;但我也希望顶部的标签栏突出显示3或4个特定的链接/页面。我怎么能让他们都工作？当我将标签栏放在我的脚本中时，滑动菜单无法正常工作。

Answer 1

首先，Tabbar元素设计为默认显示在页面底部：

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

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

更改此位置

关于组合滑动菜单+ tabbar的问题我把这两个元素放在一起没有任何问题。尝试创建一个新的Onsen UI Sliding Menu项目，并以这种方式修改文件 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>

我想给你发贴一个屏幕，但我仍然没有足够的声誉

Answer 2

实现滑动和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

结合Onsen UI滑动菜单和tabbar

2 个答案: