Question

我的应用中有标题和副标题。我创建了如下所示的html：

<ion-header-bar class="bar-dark">
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon">
    </a>
    <a class="button button-icon icon ion-ios-search">
    </a>
    <a class="button button-icon icon ion-person">
    </a>
  </ion-header-bar>
  <ion-header-bar class="bar-subheader bar-dark">
    <a href="#">Populært
    </a>
    <a href="#">Siste
    </a>
  </ion-header-bar>

当我在浏览器中测试应用程序（chrome）时，它看起来几乎就像我希望它看起来一样，但是当我使用ios的模拟器时，标题和副标题看起来比它们应该更大。

这是浏览器的屏幕截图：

这是从模拟器中截取的截图：

这是此页面的scss文件：

.bar.bar-dark{
    display: inline-block;
    height: 45px;
    padding-top:0;
    background-color: $dark-background-color;
    color:$light;
    border-color: $dark-background-color;
    background-image: none;

    .row{
        padding-top:0;

        .icon{
            font-size: 2rem;
        }
        .ion-navicon{
            font-size: 3rem;
        }
        .right{
            padding-top:16px;
        }
    }

    a{
        color:$light;
        text-decoration: none;

        &:active{
            color:$gray;
        }
    }
}

.bar-subheader {
    top: 45px;
}

.has-subheader {
    top: 90px;
}

.item-light {
    .article{
        img{
          width: 100%;
        }

        h1 {
            color: $light;
            position: absolute;
            bottom: 5rem;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            font-size: 2rem;
            padding: 0 10%;
        }
    }
    .row{
        padding:.7rem;

        a{
            font-size: 1.1rem;

            i {
              vertical-align: middle;
              font-size: 2.1rem;
            }
        }
    }
}

这是我所有页面的scss文件：

body{
    background-color: $dark-background-color;
}

.item {
    border: 0;
}

.item-content {
    padding:0!important;
}

.right{
    text-align: right;
}

//Buttons
.button{
    min-height: 60px;

        &:active, &:hover{
            border-color:transparent;
        }
}

//Customizing Ionic Icons
.icon{
    color:white;
    vertical-align: middle;
}

.ion-ios-heart-outline, .ion-ios-heart {
    font-size: 1.7rem;
    color: $red;
}

.ion-ios-chatbubble, .ion-chevron-right {
    font-size: 1.7rem;
    color: $gray;
}

.ion-chevron-left {
    font-size: 2rem;
    color: $light;
    margin: 10px;
    position:absolute;
    top:15px;
    z-index:1;
}

.ion-social-facebook {
  font-size: 1.7rem;
  color: $gray;
}

.popup-head {
  background-color : $dark-background-color;
  border: 0;

  .popup-title {
    font-size: 16px;
  }
}

更新了代码

我已经将类更改为不同的名称，希望覆盖默认的bar-header类。这是我的css：

.articles-header {
    display: inline-block;
    padding-top:0;
    height: 45px;
    background-color: $dark-background-color;
    color:$light;
    border-color: $dark-background-color;
    background-image: none;

    a{
        color:$light;
        text-decoration: none;
        font-size: 3rem;

        &:active{
            color:$gray;
        }
    }

    .right-icons {
      float: right;
    }
}

.articles-subheader {
    top: 45px;

    a {
      font-size: 1rem;
    }

    .button:hover {
      color:$light;
    }
}

.has-subheader {
    top: 90px;
}

这是我的HTML：

<div class="row articles-header">
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon-round">
    </a>
    <div class="right-icons">
      <a class="button button-icon icon ion-ios-search-strong">
      </a>
      <a class="button button-icon icon ion-person">
      </a>
    </div>
  </div>
  <div class="row articles-subheader articles-header">
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint('siste')"><i class="ion-ios-circle-filled" ng-show="bulletpointSiste"></i> Siste
    </a>
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint()"><i class="ion-ios-circle-filled" ng-show="bulletpointPopular"></i> Populært
    </a>
  </div>

但最终Tomislav的建议很有效。我想知道的是，如果我现在要更改高度，我应该在Tomislav写的css中更改它，并且这个值只是用于覆盖但实际上不是更改高度或者我应该更改我的文章标题中的高度，articles-subheader classes？

Answer 1

Ionic使用平台检测来确定标头的高度。因此，要覆盖它，您需要使用整个正确的CSS选择器。

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 64px; }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
    margin-top: 19px !important; }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 20px; }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
  top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
  top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
  top: 108px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top {
  top: 113px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
  top: 157px; }
.platform-ios.platform-cordova.status-bar-hide {
  margin-bottom: 20px; }

Answer 2

在ion-content添加class = "has-subheader"我希望这可以解决您的问题

Ionic标题和子标题在浏览器和模拟器

2 个答案: