键盘打开时向上滚动 Ionic 2

Question

我尝试使用 Ionic 设计一个登录屏幕，我的字段位于页面的中心。 当我选择输入时，我想向上滚动屏幕以将我的字段和登录按钮保留在应用程序屏幕的中央。

我有 1 中的内容，我想要 2

我真的不知道该怎么办。

这是我的html代码：

<ion-content class="login-page-background">
  <div class="content-login">
    <img src="assets/images/logo-yellow.svg" width="70%"><br><br>
    <div>
      <div class="login-information-bloc">
        <input placeholder="{{this.translate.get('...')}}" (select)="scrollUp()" class="input-login"/>
        <input type="password" placeholder="{{this.translate.get('...')}}" class="input-login"/><br>
        <p class="password-forgot">{{this.translate.get('...')}}</p>
      </div>
      <button (click)="login()" ion-button color="secondary">
        <label>{{this.translate.get('...')}}</label>
      </button>
    </div>

    <div class="flag-bloc">
      <p>{{this.translate.get('...')}}</p>
      <img src="assets/images/fr.svg" (click)="changeCountry('fr')" [ngClass]="{'flag-button' : this.fr_selected}" width="55px" style="margin: 0px 10px 0px 10px">
      <img src="assets/images/ch.svg" (click)="changeCountry('ch')" [ngClass]="{'flag-button' : this.ch_selected}" width="55px" style="margin: 0px 10px 0px 10px">
    </div>
  </div>
</ion-content>

Answer 1

如果您检查 html，您会注意到 ion-content 有固定内容和滚动内容子项。因此，当键盘打开时，滚动内容将自动调整大小以适应新的屏幕空间。

话虽如此，我不知道你的所有 css 类中有什么，但我建议你的容器类不要有任何固定的高度。这样，当内容调整大小时，您的元素应该适合新的较短容器大小。

Answer 2

我在 Ionic 6 v 上也遇到了同样的问题。 我已经解决了它只是使用“keyboardDidShow”事件来向上滚动此页面。

  import { Keyboard } from "@capacitor/keyboard";
 import { Capacitor } from "@capacitor/core"; 

if (Capacitor.isNativePlatform()) {
  Keyboard.addListener("keyboardDidShow", () => {
    //scrollUp
   const elem = document.getElementById(elemId);
   const pageContent = document.getElementById(pageId);
    if (elem && pageContent) {
       pageContent.style.height = "400px";
       pageContent.style.overflowY = "scroll";
       elem.scrollTop += 5;  
    }
  });
}


let pageContent = document.getElementById(pageId);
if (pageContent) {
  // than resetScroll on the onChange event or focus
  pageContent.style.height = "100%";
  pageContent.style.overflow = "visible";
}

希望这对某人有帮助。