Ionic 框架：Ionic 列表中的第一项消失了

Question

我是 Ionic 世界的新手。我运行陷入了一个问题。我正在按照带有内容的离子网站的指示进行操作。但是，不知何故，列表中的第一项根本没有显示。你们能帮忙吗？非常感谢。这是我的代码：

还有为什么我的 ion-tabs 会自动出现在页脚区域？如果我想让它出现在顶部可以吗？

<div class="bar bar-header bar-calm">
    <h1 class="title">View Title</h1>
</div>

<ion-content>

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios7-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>
</ion-content>


<ion-tabs class="tabs-energized tabs-icon-top">
    <ion-tab title="Leagues" icon="ion-home" href="#"></ion-tab>
    <ion-tab title="My Team" icon="ion-star" href="#"></ion-tab>
</ion-tabs>

Answer 1

要修复列表中第一项未显示的问题，请确保您的代码包含在 <ion-view> 指令中，如下所示：

<ion-view>        
    <ion-header-bar class="bar-calm">
        <h1 class="title">View Title</h1>
    </ion-header-bar>
    <ion-content>
        <div class="list">
           ...
        </div>
    </ion-content>
    <ion-tabs class="tabs-icon-top">
        <ion-tab title="Leagues" icon="ion-home" href="#"></ion-tab>
        <ion-tab title="My Team" icon="ion-star" href="#"></ion-tab>
    </ion-tabs>
</ion-view>

至于标签栏的位置，Ionic 应该自动将其显示在 Android 应用程序的顶部和 iOS 应用程序的底部。看看 Ionic documentation for tabs.

Answer 2

好的。我终于弄明白了。而不是在 css 样式中使用 margin-top。我刚刚在 ion-content 标签中添加了一个 ionic class，然后问题就消失了。

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

Answer 3

看来你想通了<ion-content class="has-header"></ion-content>。

关于选项卡不在顶部的第二个问题：iOS 上的 Ionic 将选项卡放在底部，而 Android 上的 Ionic 将它们放在顶部。您可以通过将此添加到 appname.config():

来覆盖他们的设置

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

（记得将 $ionicConfigProvider 作为配置依赖项之一包含在内）。

Answer 4

The following code would help you to resolve your second issue.    

<ion-view>        
    <ion-header-bar class="bar-calm">
        <h1 class="title">View Title</h1>
    </ion-header-bar>
    <ion-content>
        <div class="list">
           ...
        </div>
    </ion-content>
    <ion-tabs class="tabs-icon-top tabs-top">
         <ion-tab title="Leagues" icon="ion-home" href="#"></ion-tab>
         <ion-tab title="My Team" icon="ion-star" href="#"></ion-tab>
    </ion-tabs>
</ion-view>

Answer 5

如果您的观点有 header 那么您必须在 ion-content 中提及它，即

<ion-content class='has-header'></ion-content>

Answer 6

您应该添加：

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

这将显示您的第一个项目。

Answer 7

我认为您的内容中缺少 HEADER 部分，因此请使用以下内容

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

Ionic 框架：Ionic 列表中的第一项消失了

Ionic framework: The first item in Ionic list is disappeared

ionic