Ionic - 滚动到特定元素 Virtual Scroll

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 is null

Answer 1

ionic包含的虚拟滚动组件是一个非常奇怪且充满错误的组件。在我什至开发的一个应用程序中，我尝试使用它，但我最终更喜欢使用 angular2-virtual-scroll。我认为您可以试用此组件，而不是您当前使用的组件。

Answer 2

我知道这是一个老问题，但我无法找到同一问题的答案，所以我会 post 我的答案。 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 像素检查元素是否存在，如果现在向下滚动更多直到找到它。我确信还有更多要添加的东西，比如如果它到达列表的末尾并且没有找到元素......它可能会进入无限循环...... 尽管如此，这可能对某人有用...... 干杯！

Ionic - 滚动到特定元素 Virtual Scroll

Ionic - Scroll to a particular element Virtual Scroll

ionic-framework

virtualscroll