javascript - ionic : Header overlaps content when subheader is hidden in tabs-based app in iOS

Question

我有一个导航按钮，用于在基于选项卡的应用程序中显示/隐藏子标题。问题是当隐藏子标题时，标题与 iOS 中的内容 (ion-content) 重叠。标题 Welcome to Ionic 隐藏在标题下方。

子标题已隐藏，标题 Welcome to Ionic 应该在 iOS 中可见。

重现问题的步骤:

1. 基于标签元素创建一个测试应用:

ionic 开始子标题测试标签

1. 修改 .\subheader-test\www\templates\tab-dash.html 添加子标题和显示/隐藏按钮:

    <ion-view view-title="Dashboard">
    
      <ion-nav-buttons  side="right">
        <!-- SEARCH ICON in header bar -->
        <button class="icon ion-search button button-clear"
            ng-click="toggleSubheader();">
        </button>
      </ion-nav-buttons>
    
      <ion-header-bar class="bar-subheader bar-balanced" ng-show="showSubheader">
        <h1 class="title">Subheader</h1>
      </ion-header-bar>
    
      <ion-content class="padding" ng-class="{'has-subheader' : showSubheader}">
        <h2>Welcome to Ionic</h2>
        <p>
        This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
        </p>
        <p>
          To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
        </p>
        <p>
    ......
        </p>
      </ion-content>
    </ion-view>

1. 在 .\subheader-test\www\js\controllers.js 中的 DashCtrl Controller 中添加 toggleSubheader() 函数:

   .controller('DashCtrl', function($scope) {
     $scope.showSubheader = true;
   
     $scope.toggleSubheader = function() {
       $scope.showSubheader = !$scope.showSubheader;
     };
   })
   

2. 修改.\subheader-test\www\css\style.css 修复Subheader is not displayed in tabs-based app in Android :

   .platform-android .bar-subheader.has-tabs-top{
     top:93px !important;
   }
   
   .platform-android .has-subheader.has-tabs-top{
     top:137px;
   }
   

3. 启动 Ionic 实验室:

ionic serve -l

Answer 1

我通过仅在隐藏子标题时适用于 iOS 的 css 类解决了这个问题。

CSS:

/* Shift content down when subheader is shown in iOS. */
.platform-ios .has-hidden-subheader{
  top:44px;
}

html:

<ion-content class="padding" ng-class="{
   'has-subheader' : showSubheader ,
   'has-hidden-subheader' : !showSubheader}">