隐藏在标题下方的离子标签答案

【问题标题】：Ionic tabs hidden beneath the header隐藏在标题下方的离子标签
【发布时间】：2016-05-09 16:26:19
【问题描述】：

我有一个包含许多页面的空白应用程序。这些页面之一需要深入到选项卡中。我希望在标题下显示几个选项卡（具有徽标和后退按钮）。但是，出于某种原因，这些选项卡几乎完全隐藏在标题下方。

结构如下：

<ion-view view-title="MyPage">
    <ion-header-bar align-title="center">
        <div class="app_header_side">
            <button class="button back-button">
                <i class="icon ion-ios-arrow-back"></i>
            </button>
        </div>
        <div class="app_header_center">
            <div class="text-center">
                LOGO
            </div>
        </div>
        <div class="app_header_side">
            &nbsp;
        </div>
    </ion-header-bar>
    <ion-content class="padding has-header">
        <ion-tabs class="tabs-positive tabs-icon-top">
            <ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <!-- Tab 1 content -->
            </ion-tab>
            <ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <!-- Tab 2 content -->
            </ion-tab>
            <ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
               <!-- Tab 3 content -->
            </ion-tab>
        </ion-tabs>
    </ion-content>
</ion-view>

我试图将标签放在任何地方。在标题中，在“ion-view”之前，在“ion-content”之前。没有任何效果。使 ti 工作的唯一方法是添加

style="padding-top: 30px;"

在“离子内容”的标签中。但我宁愿避免放置固定填充。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

我建议如下声明标题：

<ion-header-bar class="bar-header">

然后定义has-header

 <ion-content class="has-header">

您也可以设置一个测试：

<ion-content class="has-subheader">

这意味着像 ion-nav-bar 这样的东西已经被设置为标题。然后将ion-header-bar设置为bar-subheader。

IONIC Headers and Sub-Headers

【讨论】：

【解决方案2】：

或者，您可以像 iOS 一样将标签放在底部。

在.config中设置$ionicConfigProvider.tabs.position('bottom');

【讨论】：

【解决方案3】：

我觉得你应该试试

<ion-view view-title="MyPage" class="has-header">

我曾经遇到过同样的问题。我使用 class="has-header" 根视图解决了我的问题。

【讨论】：