个人中心
gpt4 book ai didi

javascript - 温泉 UI 分页 : navigator and tabbar

转载 作者：行者123 更新时间：2023-11-29 10:40:42 25 4
gpt4 key购买 nike

我对混合使用 navigator 和 tabbar 有疑问。

解释:主页面(Main page1)由两个子页面(tab1和tab2)组成，通过tabbar访问，而其他页面(page2和3)通过navigator访问。 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>

我希望这对其他人有用。

最佳答案

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

<!-- 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 作为子应用。这意味着当您尝试使用父导航器进行导航时，您会将另一个子项(页面)推到当前子项(标签栏)之上，因此您将不再看到标签栏(甚至工具栏，除非你在每一页都放一个新的)直到你再次按下它或删除它上面的所有 sibling 。此外，由于您只有一个导航器，因此所有页面都将存储在同一页面堆栈中。这意味着您不能将 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 作为每个项目的子项on-tab 您需要进一步导航的地方。像这样您的标签栏将始终可见，因为您使用导航器更改的不是所有内容，而是特定on-tab 的内容。每个选项卡都有自己的工作流程，存储在不同的页面堆栈中，完全独立于其他选项卡。

正如我之前所说，这实际上取决于您的应用需要什么。例如，您可以有许多选项卡，例如“设置”、“关于”等，它们只是一页 View ，然后只有一个选项卡中的导航器与真正的应用程序。

如果您的疑问现在得到澄清，请告诉我!

关于javascript - 温泉 UI 分页 : navigator and tabbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29829148/

25 4 0
文章推荐： javascript - 洗牌 HTML 链接数组的问题
文章推荐： php - 如何将 mysql 不同查询写入 Elasticsearch
文章推荐： mysql - 如何创建父表和两个子表mysql
文章推荐： javascript - 如果触发了 ajax get/post，则运行一个函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com