Ionic v3 - 滚动列表或内容时隐藏键盘

Question

我正在使用离子骨架3（v 3.9.2）。我使用顶部导航中的搜索栏，并在内容的下方列表中显示结果。很标准。但是，键盘会显示，直到我显式关闭它（在我的代码中使用this.keyboard.hide（））作为用户操作的结果（例如，用户单击取消或单击键盘上的搜索按钮）。我使用Ionic的Keyboard Plugin。

我理想的是在用户开始在搜索结果上滚动时隐藏键盘，特别是当结果在搜索输入框中键入时开始显示。 Android和iOS上的行为相同 - 实际设备

这是我尝试过的：1。在离子内容上，我监视一个滚动启动事件，然后调用键盘隐藏功能。但它很脆弱。键盘有时弹出两次，不会一直关闭。 2.我可以关闭“键入时显示结果”并强制用户明确单击搜索或取消我隐藏键盘哪个工作正常，但这不是我想要的用户体验。 3.当我开始滚动时，我试图查看是否可以在触发模糊事件（ionBlur）时隐藏键盘，但模糊永远不会被触发

有什么建议？

Answer 1

所以我的理论是“关于离子内容，我监视滚动启动事件然后调用键盘隐藏功能”的方法仍然有效。

onScroll事件的问题在于它们快速连续发射，这可能导致问题和瑕疵。

尝试实施简单的“去抖动”策略：

//在你的ts文件中有这个var：

private scrollTriggered: boolean;

//更新你的onScroll方法：

onScroll(event:Event) {
    if (!scrollTriggered) {
        this.keyboard.hide();
        this.scrollTriggered = true;
    }; 
} 

//现在在搜索输入代码中的某个位置（如ionInput），您需要将flag重置为false：

this.scrollTriggered = false;

想法是确保只在触发一次滚动事件时调用keyboard.hide（）。

如果这对你有用，请告诉我。

Answer 2

我自己就是这个问题。有一个搜索栏与虚拟滚动组件结合。正如您所提到的，每次根据搜索栏输入更改列表时，都会触发滚动事件，从而难以在滚动事件上隐藏键盘。经过大量的反复试验，我得到了这个工作。无论出于何种原因，我的虚拟滚动触发的滚动事件都是null，所以如果它为null则不能关闭键盘的简单检查为我解决了问题。

你的HTML：

<ion-content (ionScrollStart)="onScrollStart($event)">

和你的.ts：

    onScrollStart(event: any) {
    if (event === null) {
        return;
    }
    this.closeKeyboard();
}