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

Question

我正在使用ionic 4.7.0.

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

实际行为：

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

预期行为：

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

我创建了这个堆栈闪电战来突出显示行为，我们可以在堆栈闪电战中看到，在加载视图时，所选值11:00但是当您打开警报(通过单击离子选择(时，我希望视图会自动滚动到所选值上。

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

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

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

• 离子选择未显示已选择的选项与表单生成器(Ionic 3(：同上

• https://github.com/ionic-team/ionic-v3/issues/1005：一些带有离子选择的滚动错误应该用离子 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(类。若要仅影响单个警报，可以通过在ion-select的interfaceOptions属性中传递警报来为警报指定 ID。

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

Answer 2

我最近重写了我们的autoscroll指令，所以我想我会在这里分享它。它适用于所有 IonSelect 接口(警报、弹出框和操作表(。

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}
);
}
}
}