键盘正在推动离子 android 中的标签答案

【问题标题】：Keyboard is pushing tabs in ionic android键盘正在推动离子 android 中的标签
【发布时间】：2019-03-02 02:09:15
【问题描述】：

我正在 IONIC 3 上开发应用程序，但遇到了问题。当我点击 ion search 并且键盘在 ANDROID 中打开时，它只是通过破坏布局和挤压内容来推送应用程序的全部内容。

我正在使用配置.xml

<preference name="Fullscreen" value="true" />

app.component.ts

this.statusBar.hide();


this.statusBar.overlaysWebView(false)

它的工作！但是，当我进入全屏模式时，它会隐藏我的底部。

请帮帮我。

【问题讨论】：

标签： android angular ionic-framework

【解决方案1】：

您可以使用 disableScroll 方法处理 UIScrollView 在输入聚焦时向上移动。

https://ionicframework.com/docs/native/keyboard/

【讨论】：

【解决方案2】：

尝试在activityManifest文件中添加这一行标签 android:windowSoftInputMode="adjustPan

像这样

<activity
   ...
   android:windowSoftInputMode="adjustPan"> 
</activity>

【讨论】：

我找不到清单文件，除了 manifest.json。当我输入这段代码时，总是出错

【解决方案3】：

尝试在 app.scss 文件中添加这个 css。我也有同样的问题，我想出了这个答案，这个答案解决了我。希望这对您有所帮助。

.scroll-content{
  padding-bottom: 0px !important;
  margin-top: 0px;
}

【讨论】：

否 :( 可以分享一下 config.xml 和 app.component.ts 吗？
我没有在我的 config.xml 中添加任何关于此的内容。您使用的是离子原生键盘还是默认键盘插件？
我认为是默认键盘插件。
尝试使用本机键盘替换
您使用的是原生键盘吗？我可以看到代码吗？ :)

【解决方案4】：

安装 Ionic Native Keyboard 插件并尝试以下代码

  import { Keyboard } from "@ionic-native/keyboard";

  this.keyboard.onKeyboardShow().subscribe((res) => {
    this.tabBarElement = document.querySelector('.tabbar');
    if (this.tabBarElement != null ) {
      this.tabBarElement.style.display = 'none';
    }
});

this.keyboard.onKeyboardHide().subscribe((res) => {
  if (this.tabBarElement != null) {
    this.tabBarElement.style.display = '-webkit-box';
  }
});

希望您能对此有所帮助！快乐编码！

【讨论】：

【解决方案5】：

试试下面的代码：

window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is open")
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'none';
    });
  }
});

window.addEventListener('keyboardWillHide', () => {
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'flex';
    });
  }
});

将此代码添加到 appcomponent.ts 或您遇到此问题的特定选项卡中。

【讨论】：