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

Question

我正在使用ionic 4.7.0.

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

实际行为：

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

预期行为：

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

我创建了这个stackblitz来突出显示行为，我们可以在 stackblitz 上看到在加载视图时，选定的值是11:00但是当您打开警报（通过单击 ion-select）时，我希望视图会自动滚动选定的值。

这是离子选择的预期行为吗？

我发现了一些关于同一主题的问题，但没有什么能真正回答这个问题：

• Ion-select 在 Ionic 3 中不滚动：这个给出了一个 CSS 的解决方案，它不能与 ionic 4 一起使用，因为 ionic 4 使用了不可修改的 web 组件

• 离子选择不显示 FormBuilder (Ionic 3) 的选定选项：同上

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

Answer 1

目前这不是 Ionic 的功能，但有一个未解决的问题。竖起大拇指以提高其优先级。

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

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

每次预设警报时都会触发此侦听器。然后它使用aria-checkedHTML 属性查找（第一个）选定元素并将其滚动到视图中。

您可能需要查看的参数scrollIntoView()，例如滚动以使所选项目位于底部。

要仅影响ion-select警报，您可以检查警报是否具有select-alert(或single-select-alert) 类。只影响一个警报你可以通过它在给警报的IDinterfaceOptions的属性ion-select。

如前所述，这是一种解决方法，如果组件发生变化，它可能会停止工作。