Question

我有以下代码。

home.html的：

<ion-list [virtualScroll]="newDates" approxItemHeight="50px">
<ion-item *virtualItem="let date" id="i">
{{date.holiday}}
</ion-item>
</ion-list>

home.ts：

scrollTo(){
let yOffset = document.getElementById('25').offsetTop;
this.content.scrollTo(0, yOffset);
}

例如，我必须向下滚动到i = 25

以下方法适用于没有VirtualScroll的普通列表。

VirtualScroll不会显示视图中未显示的元素，因此我们会收到错误yOffset为null

Answer 1

离子包含的虚拟滚动组件是一个非常奇怪且充满bug的组件。在我开发的应用程序中，我尝试使用它，但最终我更喜欢使用angular2-virtual-scroll。我想你可以试试这个组件而不是你当前使用的组件。

Answer 2

我知道这是一个老问题，但我无法找到同一问题的答案，所以我会发布我的答案。 scrollTo 元素不起作用，因为该元素在页面上尚不存在。我认为只有可见的退出 DOM 巫婆才是虚拟滚动背后的全部想法。所以这是我或多或少地解决问题的方法：

y = 0;
@ViewChild(IonContent) content: IonContent;

async scrollTo(elementId: string) {
  if (!document.getElementById(elementId)) { 
    await this.content.scrollToPoint(0, this.y, 0);
    setTimeout(() => {
      this.y = this.y + 100;
      return this.scrollTo(elementId);
    }, 0);
  }
  if (document.getElementById(elementId)) { 
    document.getElementById(elementId).scrollIntoView(); 
  }
}

基本上，函数向下滚动 100 像素检查元素是否存在，如果现在向下滚动更多直到找到它。我确信还有更多要添加的内容，例如如果列表到达末尾但没有找到元素......它可能会进入无限循环...... 尽管如此，这可能对某人有用...... 干杯！

离子 - 滚动到特定元素虚拟滚动

2 个答案: