爱奥尼奥中的全局页脚

Question

在

Ionic 应用程序中创建全局页脚似乎是不可能的。

在单个页面中，您可以使用<ion-footer>，反过来，<ion-content>组件使用其resize()函数调整自身大小，考虑包含的页眉和页脚，以及允许选项卡的全局<ion-tab>。

app.html中具有<ion-footer>不会相应地调整内容的大小，从而导致页脚覆盖内容。

在我向 Ionic Framework 的 Content.resize 方法提交拉取请求之前，有谁知道实现全局页脚的方法？

Answer 1

如果您知道页脚的高度，则可以将.ion-page高度的样式设置为 calc(100% - #{$global-footer-height}) 。

可以打开/关闭全局页脚的示例：

app.component.ts

@HostBinding('class.has-global-footer') public globalFooterEnabled: boolean = true;
constructor(platform: Platform, statusBar: StatusBar) {
    // You can toggle the footer from a Service or something.
    setTimeout(() => this.globalFooterEnabled = false, 5000);
    // myService.somethingHappened$
           .subscribe((toggle) => this.globalFooterEnabled = toggle);
}

应用程序.html在最后：

<ion-footer class="global-footer" *ngIf="globalFooterEnabled">
    Hello World!
</ion-footer>

app.scss

$global-footer-height: 50px;
.has-global-footer .ion-page {
  height: calc(100% - #{$global-footer-height});
}
.global-footer {
  height: $global-footer-height;
}