pushPage 后如何保持 Onsen UI 标签栏高度？

Question

我正在使用 Monaca + Onsen UI 开发 iOS/Android 应用程序。我为每个页面使用以下 HTML 结构：

tabbar.html

<ons-page>
  <ons-tabbar var="mainTb">
    <ons-tabbar-item no-reload icon="home" label="HOME" page="home.html" active="true">
    </ons-tabbar-item>
    <ons-tabbar-item no-reload icon="talk" label="TALK" page="talkList.html">
    </ons-tabbar-item>
    ...
  </ons-tabbar>
</ons-page>

talkList.html

<ons-page ng-controller="TalkListController">

  <!-- This is the "Navigation bar" -->
  <ons-toolbar>
    <ons-toolbar-button ng-click="fnShowGlobalMenu()">
      <ons-icon icon="ic_global"></ons-icon>
    </ons-toolbar-button>
  </ons-toolbar>

  <!-- The list of talk -->
  <ons-list>
    <ons-list-item ng-repeat="r in talkRow" ng-click="showTalk(r.talkCode)">
      <ons-row>
        <ons-col>
          <div>
            {{r.userName}}
          </div>
          <!-- Some talk list info... -->
        </ons-col>
      </ons-row>
    </ons-list-item>
  </ons-list>

</ons-page>

talkDetail.html

<ons-page ng-controller="TalkDetailController">

  <!-- This page have "Go back" icon instead of "Global Menu" -->
  <ons-toolbar>
    <ons-toolbar-button ng-click="fnShowGlobalMenu()">
      <ons-icon icon="ic_global"></ons-icon>
    </ons-toolbar-button>
  </ons-toolbar>

  <!-- This is where message bubbles show up for users. -->
  <ons-list-item ng-repeat="r in messageRow" repeat-done="toBottom()">
    ...
  </ons-list-item>

  <!-- This is text area to enter message to send. -->
  <ons-bottom-toolbar>
    ..
  </ons-bottom-toolbar>

</ons-page>

基本上，导航需要两个步骤来显示talkDetail，它显示了用户在时间轴上的谈话。用户点击标签栏项目“TALK”，然后导航到talklist.html。用户接下来选择要与之交谈的人，然后点击调用showTalk() 的 ons-list-item 之一。这个showTalk() 就是this._scope.appRoot.pushPage(pageName, params);

代码几乎可以完美运行，除非页面移动到talkDetail.html。从talkList.html 导航到talkDetail.html 时，talkDetail.html 中的“导航栏”（ons-toolbar）会缩小其高度，使该区域中的标题文本和“后退按钮”更难点击。

Tabbar navigation

这仅在 iOS 设备中发生，在 Android 中不会发生。

有没有办法解决这个问题？我试图“覆盖”css，但我不知道这是否是正确的方法。对不起菜鸟问题。我对 Onsen UI 和 Monaca 还很陌生...

Answer 1

嗯，正如您在 iOS 中看到的，工具栏背景包括操作系统的状态栏。 Onsen UI 具有自动状态栏填充功能，可以找到适当的工具栏并使其变大。

您的结构似乎有点奇怪，导致 Onsen UI 认为该特定工具栏不需要更大。

解决此问题的正确方法是检查您的结构，看看为什么它认为不需要它。如果您解决了原因，那么一切都将正常工作而无需进一步更改。

该功能的实现已经经历了一些更改，因此实际上提及您正在使用的版本可能会很有用。如果您使用的是 Onsen 2，则该实现将向认为需要它的页面添加 status-bar-fill 属性。 Onsen 1 的实现有点不同，因此检查可能有点困难。

不幸的是，我不确定我是否对您的结构有足够清晰的了解，以便指出错误。你可以用这个例子做一个codepen，这样我们就可以更好地理解这种情况。现在我只能看到一个标签栏和一些页面，但是你说你正在使用像 this._scope.appRoot.pushPage(pageName, params) 这样的东西，这听起来像一个导航器，在其他地方没有提到。

关于覆盖 css - 这并不是修复它的正确方法，但是如果另一种方法花费太多时间和精力，您可能需要考虑它。如果您对更改状态栏的背景不是很感兴趣，您可以在 iOS 中简单地执行 ons.disableAutoStatusBarFill() 和 body {top: 20px}。