Ionic has-header 在列表中被忽略答案

【问题标题】：Ionic has-header being ignored in a listIonic has-header 在列表中被忽略
【发布时间】：2015-09-18 08:41:38
【问题描述】：

我刚开始在一个项目中使用 Ionic 和 Angular。所以这可能是初学者的错误。

所以我制作了一个带有标题、选项卡和选项卡内列表的 html 文件。现在我确实遇到了列表的第一项在标题之后消失的问题。

我正在尝试使用以下代码实现此目的：

<ion-header-bar class="bar-default">
  <h1 class="title">Test</h1>
</ion-header-bar>

<ion-tabs class="tabs-default tabs-striped">
  <ion-tab title="Rooms">
    <ion-content class="scroll-content ionic-scroll has-header">
      <ion-list>
        <ion-item ng-repeat="room in Rooms">
          {{ room.Name }}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>
  <ion-tab title="Another tab"></ion-tab>
  <ion-tab title="Another tab"></ion-tab>
</ion-tabs>

这确实给了我一个标题、一个列表和标签。但就像我说的，第一项在标题之后消失了。

我注意到，如果我将<ion-content><ion-list>..</ion-list></ion-content> 放在标签内容之外，它确实可以正常工作。但根据文档，您可以将内容放在 ion-tab 标签内。

【问题讨论】：

Stefan，你试过我的解决方案了吗？
是的，它成功了，谢谢。
有机会accept我的答案吗？赞成票不仅仅是受欢迎的 :-) 欢呼。

标签： ionic-framework ionic

【解决方案1】：

ion-tabs 包含一组ion-tab，但ion-tab 指令要求您在每个选项卡中包含ion-nav-view。

您不会在 documentation 中找到此内容。

您的 html 将如下所示：

  <body ng-app="app">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
        <ion-tabs class="tabs-default tabs-striped tabs-top">
          <ion-tab title="Rooms">
            <ion-nav-view>
              <ion-content  ng-controller="mainCtrl">
                <ion-list>
                  <ion-item ng-repeat="room in Rooms">
                    {{ room.Name }}
                  </ion-item>
                </ion-list>
              </ion-content>
            </ion-nav-view>
          </ion-tab>
          <ion-tab title="Another tab">
            <ion-nav-view>
              <ion-content>AAA</ion-content>
            </ion-nav-view>
          </ion-tab>
          <ion-tab title="Another tab">
            <ion-nav-view>
              <ion-content>BBB</ion-content>
            </ion-nav-view>
          </ion-tab>
        </ion-tabs>
  </body>

我已将 tabs-top 类用于 ion-tabs 指令，但您可以按照自己喜欢的方式进行更改。

请注意，我在每个 <ion-tab> 中都放置了一个 <ion-nav-view>。那是框架将加载您的内容的地方。

这很棘手，但是当您开始使用路由并且每个选项卡内容都是从其他视图加载时就会变得很明显。

如果你想看看它是如何工作的，你可以查看this。

【讨论】：

天啊！谢谢！这个答案是金！我一直在为这个问题苦苦挣扎好几天，但在任何地方都找不到答案！即使是 ionic 网站上的教程视频也没有包含 ion-nav-view 标签。 OP：请不要忘记将此标记为已接受的答案，以便@LeftyX 获得额外的代表点数。
ion-tabs 和导航是 ionic 框架的一大奥秘。没有人知道如何使用它们或将东西放在哪里。您只需要尝试并尝试，最终一切都会奏效:-) 干杯。