angular - ionic 滚动到带有虚拟滚动的项目

Question

我有一个大数据列表。
为了使滚动不滞后，我使用了 Virtual Scroll，如下所示:

<ion-list [virtualScroll]="sections">
    <div  *virtualItem="let section" class="section" [attr.id]="section.chapterNum">
      <h4 *ngIf="section.Chapter !=''">{{section.Chapter}}</h4>
      <h5 [ngClass]="section.Section_Title">{{section.Section_Title}}</h5>
      <div [innerHTML]="section.Section_Body | sanitizeHtml"></div>
    </div>
</ion-list>

我还需要跳转到列表的特定部分，我是这样做的(在应用虚拟滚动之前):

GoToSection(chapter: number, section: string) {
    this.menuCtrl.close();
    var el = document.getElementsByClassName(section);
    let yOffset;
    for (var i = 0; i < el.length; i++) {
      if (+el[i].parentElement.id == chapter) {
        yOffset = (el[i] as HTMLElement).offsetTop;
      }
    }
    setTimeout(() => {
      this.content.scrollTo(0, yOffset, 0)
    }, 300);
}

但是，当我尝试使用这个方法时，它显示一个空白屏幕，因为它还没有渲染滚动的元素并且找不到它。
使用 Virtual Scroll 滚动到元素有不同的方法吗？

如果没有，是否有 Virtual Scroll 的替代选项？ (无限滚动不是一个选项)

Answer 1

我还没有用过 angular2-virtual-scroll我自己打包(这是我假设你引用的那个)，但我知道 Angular Material2 团队正在努力将虚拟滚动添加到他们的库中，他们有一个 open PR for adding "scrollTo" functionality for virtual scroll lists of fixed size .

通过检查它们的实现，您应该能够为您的用例构建一个虚拟的“scrollTo”函数(假设您正在处理“固定大小”列表)。这是该 PR 中的一些相关代码，但是 you'll really want head over and examine their full implementation :

  /**  Scrolls to the offset on the viewport. */
  scrollToOffset(offset: number, options = { smooth: false, lazy: false }) {
    const viewportElement = this.elementRef.nativeElement;
    const top = this.orientation === 'vertical' ? offset : 0;
    const left = this.orientation === 'horizontal' ? offset : 0;

    let shouldScroll = true;
    if (options.lazy) {
      const currentOffset = this.measureScrollOffset();
      const currentOffsetEnd = currentOffset + this.getViewportSize();
      shouldScroll = offset < currentOffset || offset > currentOffsetEnd;
    }

    if (shouldScroll) {
      if (options.smooth && supportsSmoothScroll()) {
        viewportElement.scrollTo({ left, top, behavior: 'smooth' });
      } else {
        if (this.orientation === 'vertical') {
          viewportElement.scrollTop = top;
        } else {
          viewportElement.scrollLeft = left;
        }
      }
    }
  }

  /** Scroll the viewport to the specified index. */
  scrollToIndex(index: number,  options = { smooth: false, lazy: false }) {
    const contentSize = this.measureRenderedContentSize();
    const offset = this._scrollStrategy.getScrollOffsetForIndex(index);
    this.scrollToOffset(offset, options);
  }

并且在与 this._scrollStrategy 对象关联的文件中:

  /** Get the offset for the given index. */
  getScrollOffsetForIndex(index: number) {
    return index * this._itemSize;
  }

此外，如果您确实构建了一些东西，我想 angular2-virtual-scroll 项目会欢迎您的 PR。