离子:副标题不会显示在Android中基于标签的应用中 [英] Ionic: Subheader is not displayed in tabs-based app in Android

问题描述

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

I am struggling to add subheader into tabs based Ionic application. The problem is that the subheader is not shown in Android, but it is shown in iOS.

我想在搜索栏中使用副标题，以便它不会随其下面的内容一起滚动.

I want to use subheader for a search bar, so that it is not scrolled away with content bellow it.

重现此问题的步骤:

1. 基于标签项目创建测试应用:

ionic start subheader-test tabs

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

1. Modify .\subheader-test\www\templates\tab-dash.html to add subheader on Status tab so that it looks like the file bellow:

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

1. 开始离子实验室:

ionic serve -l

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

I tested ion-content with combinations of has-subheader and has-header classed but it was to no avail.

在我测试过的任何浏览器(Chrome，Firefox，IE 11)中，Subheader均未显示在该应用的Android版本中.

Subheader is not show in Android version of the app in any browser I tested (Chrome, Firefox, IE 11).

推荐答案

这可以解决问题:

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');:

Or maybe you can add $ionicConfigProvider.tabs.position('bottom'); in app.js like this:

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

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

这篇关于离子:副标题不会显示在Android中基于标签的应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！