Ionic：子标题不显示在 Android 中基于选项卡的应用程序中答案

【问题标题】：Ionic: Subheader is not displayed in tabs-based app in AndroidIonic：子标题不显示在 Android 中基于选项卡的应用程序中
【发布时间】：2017-02-11 14:54:46
【问题描述】：

我正在努力将子标题添加到基于选项卡的 Ionic 应用程序中。问题是子标题在Android中不显示，但在iOS中显示。

我想为搜索栏使用副标题，这样它就不会被滚动到下面的内容中。

重现问题的步骤：

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

ionic start subheader-test tabs

修改 .\subheader-test\www\templates\tab-dash.html 以在“状态”选项卡上添加子标题，使其看起来像下面的文件：

<ion-view view-title="Dashboard">

  <ion-header-bar class="bar-subheader bar-balanced">
    <h1 class="title">Subheader</h1>
  </ion-header-bar>

  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
      ....
    </p>
  </ion-content>
</ion-view>

启动 Ionic 实验室：

ionic serve -l

我用has-subheader 和has-header 分类的组合测试了ion-content，但无济于事。

在我测试过的任何浏览器（Chrome、Firefox、IE 11）的 Android 版本的应用程序中，子标题都不显示。

【问题讨论】：

标签： javascript ionic-framework

【解决方案1】：

这可能会解决问题：

www/css/style.css

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

.platform-android .has-subheader.has-tabs-top{
  top:137px;
}

或者您可以像这样在 app.js 中添加$ionicConfigProvider.tabs.position('bottom');：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom');
     //
    }

【讨论】：

我使用了带有 css 样式的选项 - 它有效。非常感谢，没想到这么快就得到了正确答案。

【解决方案2】：

这对我来说不太奏效。我必须从子标题 CSS 中删除 "has-tabs-top" 类才能使其工作（在 Chrome 控制台中查看，运行 ionic serve --lab 时该类未分配给子标题）

【讨论】：