从Page2导航到Page1期间页脚可见

Question

当从page1导航到page2然后从page2导航回page1时，

离子页脚按钮不会正常消失。

这里是第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

赞赏任何评论/答案！

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标签将按钮换行并用padding解决了我的问题：

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