当键盘显示时,Ionic 2 Form上升

Question

我正在使用离子2的最新版本.我的代码<ion-content padding><form></form></ion-content>里面有一个文本输入.当我尝试在Android上输入内容时,整个页面会被键盘向上推.

html文件

<ion-content class="login-screen" padding>
  <form (ngSubmit)="login()" novalidate>
    <ion-list>
      <ion-item>
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" name="username" [(ngModel)]="username" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password" [(ngModel)]="password" required></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit">Login</button>
  </form>
  <button ion-button clear full outline type="button" (click)="openModal()">Forgot Password?</button>
</ion-content>

有什么解决方案吗？

Answer 1

这一切都应该在RC4中修复(很快).话虽如此,要在输入聚焦时禁用滚动,请将其添加到配置对象(在@NgModule)中:

...
imports: [
    IonicModule.forRoot(MyApp, {
        scrollAssist: false, 
        autoFocusAssist: false
    }),
    ...
],
...

这里有两个属性的非常好的解释:

但是,在Ionic2默认值下,还有其他功能可以通过在内容底部添加填充('scrollAssist')来补偿键盘视频,并通过向后滚动来保持焦点输入元素在视口内( 'autoFocusAssist').scrollAssist和autoFocusAssist都在配置中很好地实现了开关,但似乎还没有公开记录.

您还可以使用ionic-plugin-keyboard停止本机浏览器向上推/滚动内容窗格,并允许键盘滑过并覆盖现有内容:

this.platform.ready().then(() => {
    StatusBar.styleDefault();
    Splashscreen.hide();

    Keyboard.disableScroll(false); // <- like this

    // ...

UPDATE

就像评论中提到的@Luckylooke一样:

支持Keyboard.disableScroll(),ios和windows

更新II

截至Ionic 3.5.x似乎键盘仍然存在一些问题.我发现从UI/UX的角度来看,以下配置产生了更好的结果(与默认值相比):

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

通过保持scrollAssist: true我们避免输入被键盘隐藏,如果它靠近页面的底部,并通过设置scrollPadding: false我们还避免一些与隐藏键盘后的空白空间相关的奇怪错误.

Answer 2

输入和表单的滚动存在一些问题，就像这里提到的那样，所以我建议等待下一个 RC 来解决这个问题，因为它不是你的代码错误，只是离子错误。