CDK 无限滚动结束检查

Question

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

堆栈闪电战链接 https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv

Answer 1

根据 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