Question

我尝试在同一页面上制作Sliding-menu，Tabber。一切都很好，工作得很好，直到我添加＆＃34; Tabbar＆＃34;在页面中，然后页面中的Sliding-Menu和ons-button都不起作用。需要帮助，这是我的代码。

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

Answer 1

尝试将tabbar放在这样的模板中：

<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

滑动菜单＆amp;添加tabbar后，sons-button无法正常工作

1 个答案: