在键盘打开 Ionic3 时隐藏页脚 [英] Hide footer on keyboard open Ionic3

问题描述

我试图在键盘打开时隐藏 Ionic 3 应用的页脚，

I'm trying to hide the footer of my Ionic 3 app when the keyboard is open,

我已按照官方文档以及此问题已接受的答案中的步骤进行操作:隐藏键盘上的标签页打开

i've followed the steps found on official documentation and also on this question's accepted answer: Hide tabs on keyboard open

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

I've correctly installed the keyboard plugin and imported it in app.module.ts, i have this code in 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 类:

i've correctly set the css class :

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

并将这个hideElementOnKeyboardShown"类添加到页脚，现在发生的情况是页脚消失了几毫秒(我猜是键盘出现所需的时间)，然后重新出现在键盘顶部，部分隐藏了页面上的一些输入字段.

and added this "hideElementOnKeyboardShown" class to the footer, what's happening now is that the footer disappears for few milliseconds (i guess the time that it takes for the keyboard to show up) and then reappears on top of the keyboard, partially hiding some input fields on the page.

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

I need to find a way to hide the footer, or just to keep it at the bottom of the page, covered by the keyboard (i've also tried with z-index but it isn't working)

推荐答案

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;
  })
}

这篇关于在键盘打开 Ionic3 时隐藏页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！