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-navigator和ons-tabbar，则无需ons-sliding menu，因为您可以使用这两个元素执行导航。

以下是有关如何组合tabbar和滑动菜单的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中添加侧面菜单

1 个答案: