Ionic framework: первый элемент в ионном списке исчез

Я новичок в ионном мире. Я столкнулся с проблемой. Я следовал указанию с веб-сайта 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>
6
ionic

7 ответов

ok. Наконец-то я понял. Вместо использования margin-top в стиле css. Я просто добавил ионный класс В теге ионного содержимого, затем проблема исчезла.

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

9
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>
3

похоже, ты разгадал <ion-content class="has-header"></ion-content>.

что касается вашей второй проблемы с вкладками, не находящимися наверху: Ionic на iOS помещает вкладки внизу, а на Android-сверху. Вы можете переопределить их настройку, добавив это в свой appname.config():

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

(не забудьте указать $ionicConfigProvider как одна из зависимостей конфигурации).

3

чтобы исправить первый элемент в списке не отображается, убедитесь, что ваш код содержится в

0

если ваше представление имеет заголовок, то вы должны упомянуть его в Ion-content i.e

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

вы должны добавить:

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

это отобразит ваш первый элемент.

0

Я думаю, что вам не хватает раздела заголовка в вашем контенте, поэтому используйте следующее

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