Question

我对混合导航器和tabbar存在疑问。

说明：主页面（主页面1）由两个子页面（tab1和tab2）组成，可由tabbar访问，而其他页面（第2页和第3页）则通过导航器访问。 tab1页面是第一个激活的页面。

布局：tab1和tab2页面具有相同的工具栏（在顶部）。 page2和page3有不同的工具栏和后退按钮，另一个按钮可以重定向到主页tab1。

我的代码是这样，但我不知道它是否正确或最佳方法：

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

我希望这对其他人有用。

Answer 1

由于没有具体问题，我将尝试澄清您在那里使用的导航模式。

<!-- 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也将被重置。

如果您了解它并且是您真正想要做的事情，这是完全正常的。这取决于你需要什么。

<!-- 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的内容。每个选项卡都有自己的工作流程存储在不同的页面堆栈中，完全独立于其他页面。

正如我之前所说，这实际上取决于你对app的需求。例如，您可以使用许多选项卡，例如“设置”，“关于”等，这些只是一页浏览，然后只有一个选项卡中的导航器与真实应用程序。

如果您的疑虑现在得到澄清，请告诉我们！

Onsen UI分页：导航器和tabbar

1 个答案: