javascript - ionic : Subheader is not displayed in tabs-based app in Android

Question

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

我想在搜索栏上使用副标题，这样它就不会随着下面的内容一起滚动。

重现问题的步骤:

1. 基于选项卡项目创建测试应用:

ionic 启动子标题测试选项卡

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

我使用 has-subheader 和 has-header 类的组合测试了 ion-content，但没有效果。

在我测试的任何浏览器(Chrome、Firefox、IE 11)中，Android 版本的应用程序中均不显示副标题。

Answer 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');
     //
    }