2
У меня есть сомнения относительно смешивания навигатора и табуляции.Onsen UI Pagination: навигатор и табуляция
Объяснение: главная страница (основная страница1) состоит из двух дочерних страниц (tab1 и tab2), к которым осуществляется доступ по вкладке, в то время как другие страницы (стр. 2 и 3) доступны через навигатор. Страница tab1 первая активирована.
Макет: страницы tab1 и tab2 имеют ту же самую панель инструментов (сверху). На странице 2 и стр. 3 имеется панель инструментов с обратной кнопкой и другая кнопка для перенаправления на вкладку main1.
Мой код, но я не знаю, если это правильно или лучший подход:
<!doctype html>
<html lang="en" ng-app="app">
<head>
\t <meta charset="utf-8">
\t <meta name="apple-mobile-web-app-capable" content="yes">
\t <meta name="mobile-web-app-capable" content="yes">
\t <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
\t <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
\t <link rel="stylesheet" href="styles/app.css"/>
\t <style>
\t .item {
\t padding: 10px;
\t line-height: 1;
\t }
\t </style>
\t <script src="lib/onsen/js/angular/angular.js"></script>
\t <script src="lib/onsen/js/onsenui.js"></script>
\t <script>
\t angular.module('app', ['onsen']);
\t
\t angular.module('app').controller('AppController', function($scope) {
\t // functions for AppController
\t });
\t angular.module('app').controller('Tab1Controller', function($scope) {
\t // functions for Tab1Controller
\t });
\t angular.module('app').controller('Tab2Controller', function($scope) {
\t // functions for Tab2Controller
\t });
\t angular.module('app').controller('Page2Controller', function($scope) {
\t // functions for Page2Controller
\t });
\t angular.module('app').controller('Page3Controller', function($scope) {
\t // functions for Page3Controller
\t });
\t </script>
</head>
<body ng-app="app" ng-controller="AppController">
\t <ons-navigator animation="slide" var="app.navi" >
\t \t <ons-toolbar>
\t \t \t <div class="left"><ons-toolbar-button ng-click="app.navi.pushPage('page3.html')">Go</ons-toolbar-button></div>
\t \t \t <div class="center">App</div>
\t \t \t <div class="right">
\t \t \t <ons-toolbar-button><ons-icon icon="fa ion-navicon" style="font-size: 32px; width: 1em"></ons-icon></ons-toolbar-button>
\t \t \t </div>
\t \t </ons-toolbar>
\t \t <ons-tabbar position="top">
\t \t \t <ons-tab page="tab1.html" label="Tab1" active="true"></ons-tab>
\t \t \t <ons-tab page="tab2.html" label="Tab2"></ons-tab>
\t \t </ons-tabbar>
\t </ons-navigator>
\t <ons-template id="tab1.html" >
\t \t <ons-page ng-controller="Tab1Controller">
\t \t \t <p>Content tab1</p>
\t \t </ons-page>
\t </ons-template>
\t <ons-template id="tab2.html">
\t \t <ons-scroller>
\t \t \t <p>Content Tab2</p>
\t \t \t <ons-list ng-controller="Tab2Controller">
\t \t \t \t <ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page2.html')">
\t \t \t \t \t <p>Item {{item}}</p>
\t \t \t \t </ons-list-item>
\t \t \t </ons-list>
\t \t <ons-scroller>
\t </ons-template>
\t <ons-template id="page2.html">
\t \t <ons-page ng-controller="Page2Controller">
\t \t \t <ons-toolbar>
\t \t \t \t <div class="left">
\t \t \t \t \t <ons-back-button></ons-back-button>
\t \t \t \t \t <ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
\t \t \t \t </div>
\t \t \t \t <div class="center">PAGE2</div>
\t \t \t \t <div class="right">
\t \t \t \t <ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
\t \t \t \t </div>
\t \t \t </ons-toolbar>
\t \t \t <ons-scroller>
\t \t \t \t <p>Content PAGE2</p>
\t \t \t \t <ons-list ng-controller="Tab2Controller">
\t \t \t \t \t <ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page3.html')">
\t \t \t \t \t \t <p>Item {{item}}</p>
\t \t \t \t \t </ons-list-item>
\t \t \t \t </ons-list>
\t \t \t </ons-scroller>
\t \t </ons-page>
\t </ons-template>
\t <ons-template id="page3.html">
\t \t <ons-page ng-controller="Page3Controller">
\t \t \t <ons-toolbar>
\t \t \t \t <div class="left">
\t \t \t \t \t <ons-back-button></ons-back-button>
\t \t \t \t \t <ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
\t \t \t \t </div>
\t \t \t \t <div class="center">PAGE3</div>
\t \t \t \t <div class="right">
\t \t \t \t <ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
\t \t \t \t </div>
\t \t \t </ons-toolbar>
\t \t \t <p style="text-align: center">
\t \t \t \t <ons-button modifier="light" ng-click="app.navi.popPage('page1.html');">Pop</ons-button>
\t \t \t </p>
\t \t \t <p style="text-align: center">
\t \t \t \t <ons-button modifier="light" ng-click="app.navi.pushPage('page2.html');">Page 2</ons-button>
\t \t \t </p>
\t \t </ons-page>
\t </ons-template>
\t <ons-template id="popover.html">
\t \t <ons-popover direction="up down" cancelable>
\t \t <div style="text-align: center; opacity: 0.5;">
\t \t <p>This is a popover!</p>
\t \t <p><small>Click the background to remove the popover.</small></p>
\t \t </div>
\t \t </ons-popover>
\t </ons-template>
</body>
</html>Я надеюсь, что это Util для кого-то другого.
Привет, Fran! Спасибо за ответ! Я действительно хочу, чтобы вкладка появлялась только на 2 страницах, и они переходят на другие страницы без табуляции и с другими панелями инструментов. То, как я работало визуально отлично, и я не знаю, является ли это лучшим решением для этого ... Но я был в сомнении со следующим: 1- «не может разделять рабочие процессы Tab1 и Tab2 в двух разных ветвях: if вы resetToPage в Tab1, Tab2 будет также сброшен »(что это означает?); 2- вы положили между и , это необходимо? –
Если это необходимая функциональность, тогда все в порядке.О ваших вопросах: 1- вкладка - это всего лишь элемент внутри навигатора, например, даже если у вас есть две разные страницы на вашей вкладке, когда вы поместите этот элемент (панель), обе страницы будут удалены. Вы не можете удалить только одно. 2 - 'ons-navigator' должен всегда иметь' ons-page' непосредственно внутри :) –
@FranDios Снова перепутал отношения между ons-страницей и ons-tabbar перед чтением этой темы. Благодарю. – Gearon