Question

我是Ionic世界的新手。我遇到了一个问题。我正在跟踪离子网站的内容方向。但是，不知何故，列表中的第一个项目根本没有显示。你们有人可以帮忙吗？非常感谢。这是我的代码：

还有为什么我的离子标签会自动出现在页脚区域？如果我希望它出现在顶部，我可以吗？

<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

确定。我终于弄明白了。而不是在CSS风格中使用margin-top。我刚刚在离子含量标签中添加了一个离子类，然后问题就消失了。

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

Answer 2

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

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

来覆盖其设置

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

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

Answer 3

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 4

要修复列表中未显示的第一项，请确保您的代码包含在<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 5

如果你的观点有标题，你必须在离子含量中提及它，即

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

Answer 6

你应该添加：

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

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

Answer 7

我认为您错过了内容的HEADER部分，因此请使用以下

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

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

7 个答案: