Onsen UI分页：导航器和tabbar [英] Onsen UI Pagination: navigator and tabbar
问题描述
我对混合导航器和tabbar存在疑问。
I am in doubt about mixing navigator and tabbar.
解释：主页面（主页面1）包含两个被访问的子页面（tab1和tab2）通过tabbar，同时通过导航器访问其他页面（第2页和第3页）。 tab1页面是第一个激活的页面。
Explaining: the main page (Main page1) consists of two child pages (tab1 and tab2) that are accessed by tabbar, while the other pages (page2 and 3) are accessed through the navigator. The tab1 page is the first one actived.
布局：tab1和tab2页面具有相同的工具栏（在顶部）。 page2和page3有不同的工具栏和后退按钮，另一个按钮可以重定向到主页tab1。
Layout: the tab1 and tab2 pages have the same toolbar (on the top). The page2 and page3 has different toolbar with back-button and another button to redirect to mainpage tab1.
我的代码是这样，但我不知道它是否正确或者最好的方法：
My code is this, but i don`t know if it is correct or the best approach:
<!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>
我希望那是其他人的工具。
I hope that is util for someone else.
推荐答案
由于没有具体问题我会尽力澄清一下你在那里使用的导航模式。
Since there is no specific question I will try to clarify about the navigation patterns you are using there.
<!-- 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中重置了TopTo，Tab2也将被重置。
You have an ons-navigator as the root of your app and then you have an ons-tabbar as a child. This means that when you try to navigate using the parent navigator, you will push another child (a page) over the current child (the tabbar), so you won't see the tabbar anymore (not even the toolbar unless you put a new one in every page) until you push it again or delete all its siblings over it. Also, all your pages will be stored in the same page-stack since you only have one navigator. This means that you cannot separate Tab1 and Tab2 workflows in two different branches: if you resetToPage in Tab1, Tab2 will be also reset.
如果您知道这完全没问题它是你真正想要做的。这取决于你需要什么。
This is completely fine if you are aware of it and is what you really want to do. It depends on what you need.
<!-- 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 。每个选项卡都有自己的工作流程存储在不同的页面堆栈中，完全独立于其他页面。
Another different approach, and perhaps more common, is to have the ons-tabbaras the root of the project and define one ons-navigator as a child of every ons-tab where you need further navigation. Like this your tabbar will always be visible since what you are changing with the navigators is not all the content but just the content of a specific ons-tab. Every tab will have its own workflow stored in a different page-stack, totally independent from the others.
正如我之前所说，这实际上取决于你需要什么应用程序。例如，您可以使用许多选项卡，例如设置，关于等，这些只是一页浏览，然后只有一个选项卡中的导航器与真实应用程序。
As I said before, it really depends on what you need for you app. You could have, for example, many tabs for things like "settings", "about", etc. that are just one-page views and then a navigator in only one tab with the real app.
如果您的疑虑现在得到澄清，请告诉我！
Let me know if your doubts are clarified now!
这篇关于Onsen UI分页：导航器和tabbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
