我对混合导航器和标签栏有疑问。
说明：主页（Main page1）由两个子页面（tab1和tab2）组成，通过tabbar访问，而其他页面（page2和3）通过导航器访问。 tab1 页面是第一个激活的页面。
布局：tab1 和 tab2 页面具有相同的工具栏（位于顶部）。 page2 和 page3 有不同的工具栏，带有后退按钮和另一个重定向到主页选项卡 1 的按钮。
我的代码是这样的，但我不知道它是否正确或最好的方法：
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<style>
.item {
padding: 10px;
line-height: 1;
}
</style>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
angular.module('app', ['onsen']);
angular.module('app').controller('AppController', function($scope) {
// functions for AppController
});
angular.module('app').controller('Tab1Controller', function($scope) {
// functions for Tab1Controller
});
angular.module('app').controller('Tab2Controller', function($scope) {
// functions for Tab2Controller
});
angular.module('app').controller('Page2Controller', function($scope) {
// functions for Page2Controller
});
angular.module('app').controller('Page3Controller', function($scope) {
// functions for Page3Controller
});
</script>
</head>
<body ng-app="app" ng-controller="AppController">
<ons-navigator animation="slide" var="app.navi" >
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="app.navi.pushPage('page3.html')">Go</ons-toolbar-button></div>
<div class="center">App</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="fa ion-navicon" style="font-size: 32px; width: 1em"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="tab1.html" label="Tab1" active="true"></ons-tab>
<ons-tab page="tab2.html" label="Tab2"></ons-tab>
</ons-tabbar>
</ons-navigator>
<ons-template id="tab1.html" >
<ons-page ng-controller="Tab1Controller">
<p>Content tab1</p>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-scroller>
<p>Content Tab2</p>
<ons-list ng-controller="Tab2Controller">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page2.html')">
<p>Item {{item}}</p>
</ons-list-item>
</ons-list>
<ons-scroller>
</ons-template>
<ons-template id="page2.html">
<ons-page ng-controller="Page2Controller">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
</div>
<div class="center">PAGE2</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<p>Content PAGE2</p>
<ons-list ng-controller="Tab2Controller">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page3.html')">
<p>Item {{item}}</p>
</ons-list-item>
</ons-list>
</ons-scroller>
</ons-page>
</ons-template>
<ons-template id="page3.html">
<ons-page ng-controller="Page3Controller">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
</div>
<div class="center">PAGE3</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="app.navi.popPage('page1.html');">Pop</ons-button>
</p>
<p style="text-align: center">
<ons-button modifier="light" ng-click="app.navi.pushPage('page2.html');">Page 2</ons-button>
</p>
</ons-page>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is a popover!</p>
<p><small>Click the background to remove the popover.</small></p>
</div>
</ons-popover>
</ons-template>
</body>
</html>
我希望这对其他人有用。
由于没有具体问题，我将尝试澄清您在那里使用的导航模式。
<!-- Navigator as root element -->
<ons-navigator>
<ons-page>
<ons-tabbar>
<ons-tab>...</ons-tab>
<ons-tab>...</ons-tab>
</ons-tabbar>
</ons-page>
</ons-navigator>
你有一个ons-navigator作为应用程序的根目录，然后你就有了ons-tabbar作为一个孩子。这意味着当您尝试使用父导航器进行导航时，您会将另一个子导航器（页面）推到当前子导航器（选项卡栏）上，因此您将不会再看到标签栏（甚至不是工具栏，除非您在每一页中都放置一个新工具栏），直到您再次按下它或删除它上面的所有同级工具栏。此外，您的所有页面都将存储在同一个页面堆栈中，因为您只有一个导航器。这意味着您无法将 Tab1 和 Tab2 工作流程分离到两个不同的分支中：如果您在 Tab1 中重置ToPage，Tab2 也将被重置。
如果您意识到这一点并且是您真正想做的事情，那么这是完全可以的。这取决于你需要什么。
<!-- Tab Bar as root element -->
<ons-tabbar>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
</ons-tabbar>
另一种不同的方法，也许更常见，是让ons-tabbar作为项目的根并定义一个ons-navigator作为每个人的孩子ons-tab您需要进一步导航的地方。像这样你的标签栏将始终可见因为您使用导航器更改的并不是所有内容，而只是特定内容的内容ons-tab。每个选项卡都有自己的工作流程，存储在不同的页面堆栈中，完全独立于其他选项卡。
正如我之前所说，这实际上取决于您的应用程序需要什么。例如，您可以有许多用于“设置”、“关于”等内容的选项卡，这些选项卡只是一页视图，然后只有一个选项卡中包含真正的应用程序的导航器。
如果您的疑虑现在得到澄清，请告诉我！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
