在键盘上隐藏页脚打开Ionic3

Posted 2021-04-02

当键盘打开时，我正试图隐藏我的Ionic 3应用程序的页脚，

我按照官方文档中的步骤以及这个问题的接受答案：Hide tabs on keyboard open

我已经正确安装了键盘插件并将其导入app.module.ts，我在app.component.ts中有这个代码：

this.platform.ready().then(() => {

  this.keyboard.onKeyboardShow().subscribe(() => {
        document.body.classList.add('keyboard-is-open');
    });

    this.keyboard.onKeyboardHide().subscribe(() => {
        document.body.classList.remove('keyboard-is-open');
    });


});

我正确设置了css类：

body.keyboard-is-open .hideElementOnKeyboardShown{
    display: none;        
}

并将这个“hideElementOnKeyboardShown”类添加到页脚，现在发生的是页脚消失了几毫秒（我想是键盘显示的时间），然后重新出现在键盘顶部，部分隐藏了一些输入页面上的字段。

我需要找到一种隐藏页脚的方法，或者只是将它保留在页面的底部，由键盘覆盖（我也尝试使用z-index但是它不起作用）

答案

嗨！

您需要做的就是在离子页脚上添加一个{hidden}属性，并根据“键盘打开”方法设置它返回true或false。

例：

<ion-footer [hidden]="keyboard.isOpen()" no-border padding>
 //content
</ion-footer>