Ionic：当子标题隐藏在 iOS 中基于选项卡的应用程序中时，标题与内容重叠答案

【问题标题】：Ionic: Header overlaps content when subheader is hidden in tabs-based app in iOSIonic：当子标题隐藏在 iOS 中基于选项卡的应用程序中时，标题与内容重叠
【发布时间】：2016-10-18 21:43:30
【问题描述】：

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

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

重现问题的步骤：

基于 tabs 项目创建测试应用：

ionic start subheader-test tabs

修改.\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>

在.\subheader-test\www\js\controllers.js中的DashCtrl控制器中添加toggleSubheader()函数：

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

  $scope.toggleSubheader = function() {
    $scope.showSubheader = !$scope.showSubheader;
  };
})

修改.\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;
}

启动 Ionic 实验室：

ionic serve -l

【问题讨论】：

标签： javascript css ionic-framework

【解决方案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}">

【讨论】：