Question

当键盘打开时，我试图隐藏我的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;        
}

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

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

Answer 1

你好！

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

<强> 实施例

.configs(configMap);

Answer 2

Component.html

<ion-footer [hidden]="isHideFooter"> ....</ion-footer>

Component.ts

isHideFooter:boolean = false;

ionViewWillEnter() {

  this.keyboard.onKeyboardShow().subscribe((result)=>{
    this.isHideFooter=true;
  })

  this.keyboard.onKeyboardHide().subscribe((result)=>{
    this.isHideFooter=false;
  })
}

Answer 3

如果您遇到的问题是，键盘打开时页脚会向上移动

因此，您可以使用

来隐藏页脚

android:windowSoftInputMode="adjustPan"

将此行放入活动代码内的app / manifests / AndroidManifest.xml中，该代码包含您的intentfilter动作为“ MAIN”，类别为“ LAUNCHER”

如果这是您的问题，它将解决！

在键盘上隐藏页脚打开Ionic3

3 个答案: