Question

我刚开始使用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标签内。

Answer 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-nav-view>内放置了<ion-tab>。这就是框架加载内容的地方。

这很棘手，但是当你开始玩路线并且从其他视图加载每个标签内容时，它变得很明显。

如果您想查看其工作原理，可以查看this。

在列表中忽略Ionic has-header

1 个答案: