下面是我试过的。基本上，如果您添加标签栏，滑动菜单将不再起作用。点击左上角的导航按钮什么都不做。
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>
菜单.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>
最佳答案
您不能像 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>
希望对您有所帮助!
关于javascript - 带标签栏的温泉滑动菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34099570/