首页 文章

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

提问于
浏览 次
0

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

Welcome to Ionic is hidden bellow header in iOS when subheader is hidden.

隐藏了子 Headers ，并且在iOS中可以看到 Headers Welcome to Ionic .

When subheader is shown, content is displayed correctly.

Steps to reproduce the issue:

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

ionic start subheader-test tabs

  • 修改 .\subheader-test\www\templates\tab-dash.html 以添加子 Headers 和显示/隐藏按钮：
<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 中将 toggleSubheader() 函数添加到 DashCtrl 控制器中：
.controller('DashCtrl', function($scope) {
  $scope.showSubheader = true;

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

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

.platform-android .has-subheader.has-tabs-top{
  top:137px;
}
  • 启动离子实验室：

ionic serve -l

javascript css ionic-framework

1 回答

  • 0

    我只有当隐藏了子 Headers 时才通过适用于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}">
    回复于

相关问题