固定底部条形离子

时间:2016-05-19 09:00:12

标签: javascript css angularjs ionic-framework

我想在页面底部有一个固定的页脚栏。当我把

<ion-footer-bar class="bar-dark"></ion-footer-bar>

结束时的

<ion-nav-bar class="bar-balanced">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
    Loading...
</ion-nav-view>

在我的index.html中它可以正常工作,但后来每页都有页脚。我只想在一个特定的页面下面。在此文件中添加行时

<ion-view view-title="Projects">
<ion-content class="padding">
    <ion-list>
        <div>
            <h1 class="ft-size-small ft-color-base">Projects</h1>
        <div>
        <ion-item ng-repeat="project in $ctrl.projects" href="#/project/{{project.id}}">
          <div class="item-button-right">
            <h2 ng-bind="project.name"></h2>
            <button class="button button-clear">
                <i class="icon ion-ios-information-outline"></i>
            </button>
          </div>
        </ion-item>
        <div class="text-center">
            <button class="button button-clear ft-color-green">
                Create project
            </button>
        </div>
    </ion-list>
</ion-content>
<ion-footer-bar class="bar-dark"></ion-footer-bar>

它只是重叠列表视图而不是整个页面。当我在ion-list下直接添加它时也会发生这种情况。我该怎么办?

编辑:添加图片以显示错误的布局:

enter image description here

这应该是这样的:enter image description here

1 个答案:

答案 0 :(得分:1)

<h1>导致问题:

<div>
    <h1 class="ft-size-small ft-color-base">Projects</h1>
<div>

如果你把它放在<ion-list>之上,则应该修复