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-toolbar>
    <!-- ...yourComponentHere... -->
  </ion-toolba‌r>
</ion-footer>

离子自定义组件重叠内容

1 个答案: