使用 ion-input 时，Ionic 2 页面在 iOS 中上下跳转

Question

我使用这个离子版本。

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上测试它时，当我单击离子输入时，页面会上下跳跃，这根本不是好的用户体验。任何想法 如何在iOS上解决此问题 ？

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

Answer 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上的问题。

Answer 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-itemIonic会自动添加一些类和组件时，它会在其中放置输入，也许缺少此组件会导致屏幕在不必要的情况下颠簸。

希望这有帮助。

Answer 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");