结合温泉UI滑动菜单和TabBar(Combine Onsen UI sliding menu an

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

我在左上角的滑动菜单的“全菜单”，但我也想在顶部的标签栏，突出3或4特定链接/页。 我怎么能有他们两个的工作？ 当我把我的脚本使用TabBar，滑动菜单不工作的权利。

Answer 1:

有一个关于实施滑动和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

Answer 2:

首先，使用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> 

我想后您的屏幕，但我还没有足够的声誉

文章来源: Combine Onsen UI sliding menu and tabbar