使用离子输入时，Ionic 2页面在iOS中上下跳跃答案

【问题标题】：Ionic 2 page jumps up and down in iOS when using ion-input使用离子输入时，Ionic 2页面在iOS中上下跳跃
【发布时间】：2018-02-23 01:22:16
【问题描述】：

我使用这个离子版本。

Cordova CLI: 6.2.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.2
Node Version: v7.4.0

这是代码，其目的是让用户输入信息并提交。

<ion-content>

 <ion-list *ngIf="isTest">
 <ion-input> </ion-input>
 <ion-input> </ion-input>
 <ion-input> </ion-input>
 </ion-list>

 <button ion-button>Submit</button>
</ion-content>

在 Android 上它可以工作，但是当我在 iOS 上测试它时，当我点击 ion-input 时，页面会上下跳动，这根本不是好的用户体验。任何想法如何在 iOS 上解决这个问题？

这是该问题的视频示例。 drive.google.com/open?id=0B22-s3eK4PTLWXpNMk1tbzdjcGs

【问题讨论】：

您在设备中进行测试吗？你说的上下跳跃是什么意思？你能分享一张初始状态和最终状态的图片吗？默认情况下，由于键盘，屏幕会跳转
这是我的问题drive.google.com/open?id=0B22-s3eK4PTLWXpNMk1tbzdjcGs 的示例
那么你的代码就是这样的吗？我想出了一个答案，让我们看看它是否有帮助

标签： ios ionic-framework ionic2

【解决方案1】：

好的。经过一番研究，我找到了我的问题的答案。如果其他人也有类似的问题，那么您应该在 app.component.ts 文件中添加这一行。

constructor(private config: Config) {
    this.config.set("scrollPadding", false);
    this.config.set("scrollAssist", false);
    this.config.set("autoFocusAssist", true);

    this.config.set("android", "scrollAssist", true );
    this.config.set("android", "autoFocusAssist", "delay");
}

这解决了我在 iOS 和 Android 上的问题。

【讨论】：

此解决方案适用于 ios，但在 android 中，标题仍固定在顶部。

【解决方案2】：

尝试使用ion-input，就像在文档中一样，在离子项中。

<ion-item>
  <ion-label stacked>Name</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

如果您不想要ion-label，只需将其删除并将item-content 作为属性添加到ion-input。

当你使用ion-item时，Ionic 会自动添加一些类和组件来放置输入，也许缺少这个组件会导致你的屏幕在不必要的时候出现碰撞。

希望这会有所帮助。

【讨论】：

这并不能解决问题。

【解决方案3】：

@djumerko 是对的。只是一点点改变。

这对我有用：

  this.config.set("ios", "scrollPadding", false);
  this.config.set("ios", "scrollAssist", false);
  this.config.set("ios", "autoFocusAssist", true);

  this.config.set("android", "scrollAssist", true );
  this.config.set("android", "autoFocusAssist", "delay");

【讨论】：