CdkVirtualScrollViewport

CdkVirtualScrollViewport

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

现在,我找到了scrollToIndexscrollTo方法,但是只有在ngAfterViewChecked中使用它们时,我才能让它们工作。

  • 有人可以确认在ngAfterViewChecked中使用这些方法是正确的处理方式吗?
  • 如果不是,请显示替代方法/技术?


  •   @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>

    最佳答案

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

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

    3检查后,scrollToIndex起作用。

    09-30 22:35