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团队正在努力在其库中添加虚拟滚动，并且他们有一个{ {3}}。

通过检查它们的实现，您应该能够为您的用例构建一个虚拟的“ scrollTo”功能（假设您正在处理“固定大小”列表）。以下是该PR中的一些相关代码，但open PR for adding "scrollTo" functionality for virtual scroll lists of fixed size：

  /**  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。

离子滚动到虚拟滚动项

1 个答案: