从第 2 页导航到第 1 页期间页脚可见

Question

从第 1 页导航到第 2 页，然后从第 2 页导航回第 1 页时，离子页脚按钮不会正确消失。

这是第2页中的代码：

<ion-footer padding>
  <button ion-button block round color="primary">Add to Order</button>
</ion-footer>

我在 github 上发现了完全相同的问题，建议添加标签

ion-toolbar

但这对我不起作用：

背面的离子页脚应该在 willLeave 上消失，而不是 didLeave

导航转换期间页脚可见

ion-footer-bar 和 ion-header-bar 的导航动画

如有任何评论/答案，我们将不胜感激！

Answer 1

创建一个新类，例如

.app-footer

，其 CSS 属性与

ion-footer

相同，并将 HTML 放在

ion-content

中，如下所示：

HTML

<ion-content>
  <page code>
  <div class="app-footer">...</div>
</ion-content>

SCSS

.app-footer {
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 10;
  display: block;
  width: 100%;
}

Answer 2

最后，我让它工作，用填充将按钮包裹在 div 标签中解决了我的问题：

<ion-footer>
  <div padding>
  <button
    ion-button block round color="primary"
    [disabled]="items.length === 0" (click)="onContinueClick()">
    Continue
  </button>
  </div>
</ion-footer>

Answer 3

如果有人在新版本中仍然遇到此问题。我刚刚覆盖了 ion-footer 的属性，它起作用了。在@Alex Steinberg解决方案的帮助下解决了这个问题，但修改了他的方法。

ion-footer {
  left: 0;
  bottom: 0;
  position: absolute;
}

Answer 4

在 ionic 版本 6 上我遇到了同样的问题，对于那些面临同样问题的人来说，对我有用的解决方案是将 ion-footer 的内容包含在 ion-content 中 代码示例：

<ion-footer>
    <ion-content>
        Your footer content
    </ion-content>
</ion-footer>

就我而言，我还必须设置离子页脚的高度，例如：

ion-footer{
    height: 6rem;
}