添加标签栏后滑动菜单和 ons-botton 不起作用

我尝试在同一页面上制作滑动菜单，Tabber。一切都很好，运行良好，直到我将"选项卡栏"添加到页面，然后页面中的滑动菜单和按钮都不起作用。需要帮助，这是我的代码。

<body ng-controller="AppController">
<ons-navigator>
  <ons-tabbar>
    <ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true">
    </ons-tab>
    <ons-tab page="page2.html" icon="ion-heart" label="Favorites">
</ons-tab>
<ons-tab page="page3.html" icon="ion-person" label="Profile">
</ons-tab>
</ons-tabbar>
</ons-navigator>

<ons-sliding-menu
    menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
  <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
    <ons-icon icon="fa-plus"></ons-icon>
    New Post
  </ons-list-item>
  <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
    <ons-icon icon="fa-bookmark"></ons-icon>
    Bookmark
  </ons-list-item>
  <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
    <ons-icon icon="fa-twitter"></ons-icon>
    Official Twitter
  </ons-list-item>
</ons-list>
<br>
<ons-list class="bottom-menu-list">
  <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
    Settings
    <div class="notification menu-notification">3</div>
  </ons-list-item>
  <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
    Help
  </ons-list-item>
  <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
    Send feedback
  </ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()">
      <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
    </ons-toolbar-button>
  </div>
  <div class="center">Page 1</div>
</ons-toolbar>

<ons-button modifier="cta" ng-click="menu.toggleMenu()">
  Toggle Menu
</ons-button>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()">
      <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
    </ons-toolbar-button>
  </div>
  <div class="center">Page 2</div>
</ons-toolbar>

<ons-row style="margin-top: 100px;">
  <ons-col align="center">
    <ons-button modifier="light" ng-click="menu.toggleMenu()">
      Toggle Menu
    </ons-button>
  </ons-col>
</ons-row>
</ons-page>
</ons-template>
</body>

尝试将选项卡栏放在如下所示的模板中：

<ons-template id="tabbar.html">
  <ons-tabbar>
    <ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true">
    </ons-tab>
    <ons-tab page="page2.html" icon="ion-heart" label="Favorites">
    </ons-tab>
    <ons-tab page="page3.html" icon="ion-person" label="Profile">
    </ons-tab>
  </ons-tabbar>
</ons-template>

如何使用该模板作为滑动菜单的主页：

<ons-sliding-menu
    menu-page="menu.html" main-page="tabbar.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

如果您不希望滑动菜单在打开时将选项卡向右推，则可能需要将类型更改为 "overlay"。

在这里看到这个实际操作：http://codepen.io/argelius/pen/NPqawd

相关内容

最新更新

热门标签：