html - Ionic 自定义组件重叠内容

Question

我创建了显示页脚的自定义组件(需要在许多页面上使用相同的页脚)。这是它的代码:

<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

和 CSS:

.fh .toolbar-background{
  background-color: blue;
}

.fh ion-toolbar{
  min-height: 15em;
  height: auto;
  max-height: 20em;
}

例如这个名为footer-h的组件

我想在页面中使用它，所以:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<footer-h></footer-h>

它有效，我的意思是页脚显示，但存在重叠内容的问题(页脚下列表中的其余元素无法滚动)。

但是当我这样写页面时:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

一切正常，列表可滚动，没有任何重叠。

Answer 1

就像你在this SO answer中看到的一样, 似乎对导航栏或页脚使用自定义组件可能会导致一些错误，因为它可能会影响 ion-content 的高度计算方式。

也就是说，解决问题的一种方法是将自定义组件放在 ion-footer 元素中，这样 Ionic 就可以计算内容的高度，因为ion-footer 就在那里，你仍然可以通过更新你的自定义组件来修改所有页脚的内容:

<ion-footer>
  <ion-toolbar>
    <!-- ...yourComponentHere... -->
  </ion-toolba‌​r>
</ion-footer>