如何在带有数字按钮的设备上显示离子页脚？

Question

我的问题是离子页脚隐藏在没有物理按钮的设备上的数字按钮后面；在带有数字按钮的设备上查看离子页脚的唯一方法是将设备转到横向。

ion-footer 在 android 手机小米、Oneplus 和华为中出现在导航栏后面，但其他一切正常。

我正在使用离子菜单，然后是我的离子页面

<ion-menu class="sideBar" [content]="content" [swipeEnabled]="false">
  <ion-content padding>
    ....
 </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在我的 IonicPage 中

<ion-navbar>
    <button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>
    <ion-title>
        Discover
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="goToHelp()">
            <ion-icon name="ios-help-circle-outline" style="font-weight: 700;"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>

.... ....

我正在使用 ionic 5, cordova-android: 8.1.0.

请帮助我解决这个问题，在所有其他 android 手机中它工作正常（在带有物理按钮的设备上，离子页脚工作正常。）。

您是否知道即使在带有数字按钮的设备上也能使离子页脚正常工作的技巧或功能？

Answer 1

我也是这样。

当组合 2 个配置时会发生这种情况。

第一种，隐藏状态栏的时候

thi.statusBar.hide();

这会使应用程序进入 full-screen 模式。

第二个如果在 config.xml 中，您将 resizeOnFullScreen 属性设置为 true。

这会使应用程序占据单元格的整个屏幕 phone，将内容留在数字按钮后面。

要解决它，您可以先尝试只注释使应用程序全屏的代码行：

// this.statusBar.hide();

运行在设备上进行测试以查看该修改是否足够。

如果没有，取消注释行

this.statusBar.hide();

以便您可以利用状态栏上方的 space。（可选）

现在将 resizeOnFullScreen 属性设置为 false。

因此应用程序不会占用整个屏幕。

如何在带有数字按钮的设备上显示离子页脚？

How to show ionic footer on devices with digital buttons?

android

cordova

ionic-framework