在 OnsenUI 中添加侧边菜单

Question

我想在我的 Onsenui 应用程序中添加侧边菜单，但它没有显示。我正在使用 <ons-tabbar-item> 方法，所以不确定如何在下面的 <ons-tabbar-item> 部分中添加菜单：

<body>

<ons-sliding-menu var="app.menu" main-page="dashboard.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page>
   <a href="">test</a>
  </ons-page>
</ons-template>

<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">

        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" ng-click="app.menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</body>

Answer 1

如果您已经在使用 ons-tabbar 和 ons-sliding menu，则不需要 ons-navigator，因为您可以使用这两个元素执行导航。

这是一个关于如何组合标签栏和滑动菜单的 CodePen 示例：

http://codepen.io/andipavllo/pen/RrdPNo

代码如下：

<ons-tabbar var="tabbar">
  <ons-tabbar-item icon="ion-stop" label="menu" page="hoge.html" active="true"></ons-tabbar-item>
  <ons-tabbar-item icon="ion-stop" label="menu" page="page2.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="hoge.html">
  <ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" type="overlay" max-slide-distance="250px">
    </ons-navigator>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 1</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tabbar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 2</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tab bar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(0)">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(1)">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

希望对您有所帮助！

在 OnsenUI 中添加侧边菜单

Add side menu in OnsenUI

angularjs

onsen-ui