Ionic的全球页脚

Posted 2021-04-06

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

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

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

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

答案

如果您知道页脚的高度，您可以将.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);
}

app.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;
}