如何在 pushPage 后保持 Onsen UI tabbar 高度？

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。用户接下来选择要与之交谈的人，然后点击 ons-list-item 之一，这会调用 showTalk()。这个showTalk()就是this._scope.appRoot.pushPage(pageName, params);

除了页面移动到 talkDetail.html 之外，代码几乎可以完美运行。当从 talkList.html 导航到 talkDetail.html 时， talkDetail.html 中的 "navigation bar" (ons-toolbar) 缩小了它的高度，使标题文本和 "back button" 在那个难以点击的区域。

Tabbar navigation

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

有什么办法可以解决这个问题吗？我试过 "override" css 但我不知道这是否是正确的方法。对不起，菜鸟问题。我对温泉 UI 和莫纳卡很陌生...

Answer 1

好吧，正如您在 iOS 中看到的，工具栏背景包括 OS 的状态栏。 Onsen UI 有一个自动状态栏填充功能，可以找到合适的工具栏并使它们变大。

看来您的结构可能有点奇怪，导致 Onsen UI 认为特定的工具栏不需要更大。

解决这个问题的正确方法是检查您的结构，看看为什么它认为不需要它。如果您解决了问题，那么一切都会正常进行，无需进一步更改。

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

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

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

中执行 ons.disableAutoStatusBarFill() 和 body {top: 20px}

如何在 pushPage 后保持 Onsen UI tabbar 高度？

How to keep Onsen UI tabbar height after pushPage?

onsen-ui

monaca