angular - Ionic 4 - ionic 选择不会滚动到警报中的选定项目

Question

我正在使用 ionic 4.7.0。

我报告的问题发生在 Chrome 和 Firefox 上。

实际行为:

使用带有大量选项的 ion-select，当您打开警报时，ion-select 不会自动滚动到所选值。用户看到选项列表中的第一个值，他可能认为没有选择任何内容

预期行为:

当警报打开时， View 会自动以所选值为中心

我创建了这个 stackblitz为了突出显示该行为，我们可以在加载 View 时在 stackblitz 上看到，所选值为 11:00 但是当您打开警报(通过单击 ion-select)时，我希望 View 在所选值上自动滚动。

这是 ionic 选择的预期行为吗？

我发现了几个关于同一主题但没有真正回答问题的问题:

• Ion-select doesn't scroll in Ionic 3 :这个给出了一个 CSS 的解决方案，它不能与 ionic 4 一起使用，因为 ionic 4 使用不可修改的 web 组件

• ion-select not showing selected option with FormBuilder (Ionic 3) : 同上

• https://github.com/ionic-team/ionic-v3/issues/1005 : ion-select 的一些滚动错误应该用 ionic 3.9.5 修复，所以我想这不是同一个问题

Answer 1

这目前不是 Ionic 中的功能，但有一个 open issue .给它点赞以提高其优先级。

目前您可以使用一种解决方法:

window.addEventListener('ionAlertDidPresent', e => {
  const selected = (e.target as HTMLElement).querySelector('[aria-checked="true"]');
  selected && selected.scrollIntoView();
});

每次预设警报时都会触发此监听器。然后它使用 aria-checked HTML 属性查找(第一个)选定元素并将其滚动到 View 中。

您可能想看看 the parameters for scrollIntoView() ，例如滚动以使所选项目位于底部。

要仅影响 ion-select 警报，您可以检查警报是否具有 select-alert(或 single-select-alert ) 类(class)。要只影响单个警报，您可以通过在 ion-select 的 interfaceOptions 属性中传递它来为警报指定一个 ID。

如前所述，这是一种变通方法，如果组件更改，可能会停止工作。