Как сохранить высоту заголовка пользовательского интерфейса Onsen после pushPage?

Question

Я разрабатываю приложение iOS/Android, используя интерфейс Monaca + Onsen. Я использую следующий 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> 

В принципе, для навигации по Google TalkDetail в навигацию требуется два шага, которые показывают, что пользователи разговаривают на временной шкале. Пользователь нажимает на вкладку пункт «TALK», затем переходит к talklist.html. Пользователь, следующий для выбора, с которым нужно поговорить, и удаляет один из элементов списка ons-list, которые вызывают showTalk(). Это showTalk() просто this._scope.appRoot.pushPage(pageName, params);

Код работает почти отлично, за исключением случаев, когда страница перемещается в talkDetail.html. При перемещении из talkList.html в talkDetail.html «панель навигации» (ons-toolbar) в talkDetail.html сжимает ее высоту, делает текст заголовка и кнопку «назад» в этой области сложнее.

Tabbar navigation

Это происходит только в IOS устройства, а не в Android.

Есть ли способ исправить это? Я попытался «переопределить» css, но я не знаю, правильно ли это. Извините за вопрос noob. Я совершенно новичок в пользовательских интерфейсах Onsen и Monaca ...

Answer 1

Ну, как вы можете видеть в iOS, на панели инструментов есть строка состояния ОС. В пользовательском интерфейсе Onsen есть функция автоматического заполнения строки состояния, которая находит соответствующие панели инструментов и делает их более крупными.

Кажется, что ваша структура может быть немного странной и заставляет пользовательский интерфейс Onsen думать, что эта конкретная панель инструментов не должна быть больше.

Правильный способ решить эту проблему - проверить вашу структуру и понять, почему она не думает, что это необходимо. Если вы исправите причину, все будет работать без дальнейших изменений.

Реализация этой функции прошла через некоторые изменения, поэтому фактическое упоминание версии, которую вы используете, может оказаться полезным. Если вы используете Onsen 2, реализация добавит атрибут status-bar-fill к страницам, которые ему нужны. Для Onsen 1 реализация немного отличается, поэтому проверка может быть немного сложной.

К сожалению, я не уверен, что у меня достаточно четкое понимание вашей структуры, что я могу указать на ошибку. Вы можете сделать код с этим примером, чтобы мы могли понять ситуацию немного лучше. Прямо сейчас я могу видеть только табуляцию и некоторые страницы, однако вы сказали, что используете что-то вроде this._scope.appRoot.pushPage(pageName, params), которое звучит как навигатор, о котором не упоминается нигде.

И о переопределении css - это не совсем правильный способ его исправить, однако если другой способ требует слишком много времени и сил, вы можете подумать об этом. И если вам не очень интересно менять фон строки состояния, вы можете просто сделать ons.disableAutoStatusBarFill() и body {top: 20px} в iOS.