离子滚动到虚拟滚动项目

Question

我有一个包含大数据的列表。
为了使滚动不滞后，我使用了虚拟滚动，如下所示：

<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 滚动到元素是否有不同的方法？

如果没有，是否有虚拟卷轴的替代选项？ （无限滚动不是一个选项）

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。