离子自定义组件重叠内容

Posted 2023-03-13

【中文标题】离子自定义组件重叠内容

【英文标题】：Ionic custom component overlapping content

【发布时间】：2017-12-29 17:21:06

【问题描述】：

我创建了自定义组件，它显示页脚（需要在许多页面上具有相同的页脚）。这是它的代码：

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

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

【问题讨论】：

在SO answer 中，您可以看到不建议在 Ionic 中创建全局导航栏，我认为 ion-footer 也会发生同样的情况（因为它也在 ion-content 之外）。听起来可能很丑，一点也不干，但 AFAIK 推荐的方法是在所有页面中保持该代码重复。

嗯，不过每次换x页有点不舒服：/

是的，我知道...如果您在页脚中包含自定义组件，会发生什么情况：<ion-footer><ion-toolbar>...yourComponentHere...</ion-toolbar></ion-footer>？也许这将有助于 Ionic 计算内容的高度，因为ion-footer 在那里，您仍然可以通过更新自定义组件来修改所有页脚的内容...

是的，这行得通。我没有考虑到这一点。只要写一个答案，我会选择它作为解决方案。

完成！很高兴听到它正在工作:)

【参考方案1】：

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

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

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