Question

以下是我尝试过的内容。基本上，如果添加标签栏，滑动菜单将不再起作用。单击左上方的导航按钮不会执行任何操作。

Plnkr ：http://plnkr.co/edit/VZoEO78HiUYnNFVqh1sx?p=preview

的index.html：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link data-require="onsen_ui@*" data-semver="1.0.3" rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css" />
  <link data-require="onsen_ui@*" data-semver="1.0.3" rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" />
  <script data-require="onsen_ui@*" data-semver="1.0.3" src="https://code.angularjs.org/1.2.10/angular.js"></script>
  <script data-require="onsen_ui@*" data-semver="1.0.3" src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
</head>

<body ng-controller="AppController">
  <ons-sliding-menu main-page="services.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu"></ons-sliding-menu>

  <ons-tabbar>
          <ons-tab page="services.html" label="services" icon="square" active="true"></ons-tab>
          <ons-tab page="products.html" label="products" icon="square"></ons-tab>
        </ons-tabbar>

  <script>
    angular.module('app', ['onsen']);
    angular.module('app')
      .controller('AppController', function($scope) {
      });
  </script>

</body>

</html>

menu.html：

<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('services.html', {closeMenu: true})">
  services.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('products.html', {closeMenu: true})">
  products.html
</ons-list-item>
</ons-list>

services.html：

  <ons-page>
    <ons-toolbar>
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()">
      <ons-icon icon="fa-bars" style="font-size: 32px; width: 1em;"></ons-icon>
    </ons-toolbar-button>
  </div>
  <div class="center">Services</div>
</ons-toolbar>

    <ons-list>
      <ons-list-item>Service 1</ons-list-item>
      <ons-list-item>Service 2</ons-list-item>
      <ons-list-item>Service 3</ons-list-item>
    </ons-list>
  </ons-page>

products.html放在

  <ons-page>
    <ons-toolbar>
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()">
      <ons-icon icon="fa-bars" style="font-size: 32px; width: 1em;"></ons-icon>
    </ons-toolbar-button>
  </div>
  <div class="center">Products</div>
</ons-toolbar>

    <ons-list>
      <ons-list-item>Product 1</ons-list-item>
      <ons-list-item>Product 2</ons-list-item>
      <ons-list-item>Product 3</ons-list-item>
    </ons-list>
  </ons-page>

Answer 1

您不能像ons-sliding-menu和ons-tabbar那样在同一级别编写两个组件。你需要像这样把一个放在另一个里面：

<ons-sliding-menu main-page="tabbar.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu"></ons-sliding-menu>

<ons-template id="tabbar.html">
  <ons-tabbar>
     <ons-tab page="services.html" label="services" icon="square" active="true"></ons-tab>
     <ons-tab page="products.html" label="products" icon="square"></ons-tab>
  </ons-tabbar>
</ons-template>

希望它有所帮助！

温标滑动菜单与tabbar无法正常工作

1 个答案: