离子自定义组件重叠内容

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

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

话虽这么说,解决问题的一种方法是将自定义组件放在ion-footer元素内部,这样离子可以计算内容的高度,因为离子页脚在那里,你仍然可以修改所有内容只更新自定义组件的页脚:

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