Question

我尝试实现无限滚动以在用户向下滚动列表时动态地将项目加载到列表上，但是当我访问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

Answer 1

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

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

CDK无限滚动结束检查

1 个答案: