离子自定义组件重叠内容

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;
}

例如，这个名为页脚-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

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

话虽如此，解决问题的一种方法是将自定义组件放置在ion-footer元素内，以便Ionic 可以计算内容的高度，因为离子页脚在那里，并且您仍然可以通过更新自定义组件来修改所有页脚的内容：

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