Onsen UI 分页：导航器和标签栏

Question

我对混合导航器和标签栏有疑问。

解释：主页面（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>

我希望这对其他人有用。

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

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

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

Onsen UI 分页：导航器和标签栏

Onsen UI Pagination: navigator and tabbar

javascript

mobile

tabnavigator

onsen-ui