Angularjs 滑动菜单&；添加tabbar后ons botton不工作_Angularjs_Onsen Ui

Angularjs 滑动菜单&；添加tabbar后ons botton不工作

angularjs

Angularjs 滑动菜单&；添加tabbar后ons botton不工作,angularjs,onsen-ui,Angularjs,Onsen Ui,我试着在同一页上制作滑动菜单。一切都很好，工作正常，直到我在页面中添加了“Tabbar”，然后页面中的滑动菜单和ons按钮都不工作。需要帮助，这是我的代码 <body ng-controller="AppController"> <ons-navigator> <ons-tabbar> <ons-tab page="page1.html" icon="ion-search" label="Find a place" active="tru

我试着在同一页上制作滑动菜单。一切都很好，工作正常，直到我在页面中添加了“Tabbar”，然后页面中的滑动菜单和ons按钮都不工作。需要帮助，这是我的代码

<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>


新职位
书签
官方推特


设置
3.
帮助
发送反馈
第1页
切换菜单
第2页
切换菜单

尝试将选项卡栏放入如下模板中：

<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>

如果不希望滑动菜单在打开时向右推动选项卡，则可能需要将类型更改为“覆盖”

请在此处查看此操作：