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

【问题标题】：Ionic 4 - ion-select does not scroll to selected item in alertIonic 4 - 离子选择不会滚动到警报中的选定项目
【发布时间】：2020-01-28 14:53:55
【问题描述】：

我正在使用ionic 4.7.0。

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

实际行为：

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

预期行为：

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

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

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

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

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 中修复，所以我想这不是同一个问题

【问题讨论】：

标签： angular ionic-framework scroll ionic4 ion-select

【解决方案1】：

目前这不是 Ionic 中的功能，但有一个 open issue。竖起大拇指以提高其优先级。

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

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

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

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

要仅影响ion-select 警报，您可以检查警报是否具有select-alert（或single-select-alert）类。要仅影响单个警报，您可以通过在 ion-select 的 interfaceOptions 属性中传递警报 ID。

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

【讨论】：

天啊，我应该已经找到了 github 问题/功能请求/错误。我不想相信默认情况下这不起作用，我真的以为我做错了什么。

【解决方案2】：

我最近重写了我们的 autoscroll 指令，所以我想我会在这里分享它。它适用于所有 IonSelect 接口（Alert、Popover 和 ActionSheet）。

import { Directive, HostListener } from '@angular/core';
import { IonSelect } from '@ionic/angular';

/**
 * Autoscroll to the selected option of an ion-select when opened.
 */
@Directive({
  selector: 'ion-select[autoscroll]'
})
export class AutoscrollSelectDirective {

  constructor(
    private ionSelect: IonSelect
  ) {}

  @HostListener('click')
  scrollSoon(): void {
    let keBab = '';
    switch (this.ionSelect.interface) {
      case 'alert': keBab = 'Alert'; break;
      case 'action-sheet': keBab = 'ActionSheet'; break;
      case 'popover': keBab = 'Popover'; break;
    }

    if (keBab) {
      window.addEventListener(
        `ion${keBab}DidPresent`,
        e => {
          const parent: Element = <any>e.target;
          const scrollTarget = keBab === 'ActionSheet'
              ? parent.querySelector('.action-sheet-selected')
              : parent.querySelector('[aria-checked=true]')?.closest('.select-interface-option');
          if (scrollTarget) {
            scrollTarget.scrollIntoView();
          }
        },
        {once: true}
      );
    }
  }

}

【讨论】：