2

我试图实现无限滚动以在用户向下滚动列表时动态地将项目加载到列表中，但是当我访问 end 和 total 时，它是一样的，我需要检查是否到达最后一个项目然后追加新的列表中的项目。问题是 end 和 total 都是相同的，并且每次都会触发

HTML

<cdk-virtual-scroll-viewport style="height: 300px" itemSize="5" (scrolledIndexChange)="nextBatch($event)">
  <li *cdkVirtualFor="let row of auditDetails; let j=index;" style="height: 100px;  box-shadow: 0 1px 1px black;">{{j}}</li>
</cdk-virtual-scroll-viewport>

TS

auditDetails = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

ngAfterViewInit() { }

nextBatch(currIndex: number, items: any[]) {
  const start = this.viewPort.getRenderedRange().start;
  const end = this.viewPort.getRenderedRange().end;
  const total = this.viewPort.getDataLength();
  console.log(`end is ${end} total is ${total}`)
  if (end == total) {
    console.log("end reached increase page no")
  }
}

trackByIdx(i: number) {
  return i;
}

Stackblitz 链接 https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv

4

1 回答 1

3

根据CDK 文档，itemSize属性以像素表示。我认为您试图将其表示为多个项目，这是不正确的。您应该这样尝试（itemSize值与每个项目 100px 的内联样式高度匹配）：

itemSize="100"

从现在开始，我可以在输出日志中看到：

end is 5 total is 20
end is 5 total is 20
end is 5 total is 20
end is 7 total is 20
end is 7 total is 20
end is 9 total is 20
end is 9 total is 20
end is 9 total is 20
end is 11 total is 20
end is 13 total is 20
end is 13 total is 20
end is 15 total is 20
end is 15 total is 20
end is 17 total is 20
end is 17 total is 20
end is 17 total is 20
end is 19 total is 20
end is 20 total is 20
end reached increase page no
于 2019-08-12T07:34:03.630 回答