Question

我有一个导航按钮，用于在基于标签的应用中显示/隐藏子标题。问题是当隐藏子标题时，标题与iOS中的内容（ion-content）重叠。标题欢迎来到Ionic 隐藏在标题下方。

隐藏了子标题，在iOS中可以看到标题欢迎使用Ionic 。

重现问题的步骤：

根据标签项目创建测试应用：

ionic start subheader-test tabs

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

＆＃13;

    <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>

＆＃13;

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

.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 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}">

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

1 个答案: