7

我需要的初始位置cdk-virtual-scroll-viewport不是列表的第一个元素/项目。

现在我找到了scrollToIndexandscrollTo方法,但我只有在 中使用它时才能让它们工作ngAfterViewChecked,感觉不对劲。

  1. 有人可以确认使用这些方法ngAfterViewChecked是正确的做事方式吗?
  2. 如果没有,请展示另一种方法/技术?

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }
  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

4

3 回答 3

1

我有同样的问题,我有一个不太优雅的解决方案

contentCheck = 0

ngAfterViewChecked() {
  if (this.contentCheck < 3) {
  this. cdkVirtualScrollViewport.scrollToIndex(4000);
  this.contentCheck++;
 }
}

经过 3 次检查后,scrollToIndex 有效。

于 2018-12-12T03:18:11.603 回答
0

虽然不是一个完美的解决方案,但您可以通过将 afterViewInit 与 setTimeout 结合使用来实现此行为:

ngAfterViewInit() {
    setTimeout(() => {
        this.cdkVirtualScrollViewport.scrollToIndex(50);
    });
}
于 2019-07-04T15:21:26.280 回答
0

我们可以使用以下setRenderedRange方法:

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

ngAfterViewInit() {
    const offset = 10; // that's an example
    if (this.virtualScroll) {
        setTimeout(() => {
            const currentRange = this.virtualScroll.getRenderedRange();
            this.virtualScroll.setRenderedRange({ start: currentRange.start + offset, end: currentRange.end + offset });
        });
    }
}

注意:我不确定它是否特定于我的用例,但仅通过设置预期范围,似乎没有考虑前面的项目(我们无法向上滚动)。使用它似乎很重要,scrollToIndex因此滚动正确更新。这是我的解决方法,将范围设置为减一,然后再滚动一:

    const currentRange = this.virtualScroll.getRenderedRange();
    this.virtualScroll.setRenderedRange({ start: currentRange.start + offset - 1, end: currentRange.end + offset - 1});
    this. virtualScroll.scrollToIndex(offset);
于 2020-12-17T15:51:53.990 回答