从第 2 页导航到第 1 页时可见页脚答案

【问题标题】：Footer visible during navigate from Page2 to Page1从第 2 页导航到第 1 页时可见页脚
【发布时间】：2018-06-14 19:12:03
【问题描述】：

从 page1 导航到 page2 然后从 page2 导航回 page1 时，ion-footer 按钮不会正确消失。

这是第2页中的代码：

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

我在 github 上发现了一个完全相同的问题，建议添加标签 ion-toolbar 但它对我不起作用：

ion-footer on back should disappear on willLeave not didLeave

Footer Visible During Navigation Transition

Nav animations for ion-footer-bar and ion-header-bar

感谢任何 cmets/答案！

【问题讨论】：

根据 cmets 所说，在 ion-footer 周围添加一个 ion-toolbar 应该可以解决问题
感谢您的回复，但我提到它没有帮助。 ion-toolbar 在我添加的 3 个链接中对其他人也不起作用
那么，我的建议是，不要使用页脚，而是使用位置固定在底部的 div。它的行为应该是一样的。

标签： ionic-framework ionic3 css-transitions

【解决方案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%;
}

【讨论】：

谢谢亚历克斯。我会试一试，让你知道！
对不起，回复晚了，很遗憾，它对我不起作用

【解决方案2】：

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

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

【讨论】：