使用Angular CDK提供的虚拟滚动指令。
import { ScrollingModule } from '@angular/cdk/scrolling';
cdkVirtualFor
指令
{{item}}
其中,items
是一个数组,表示要显示的数据集。cdkVirtualFor
指令可以根据容器的大小自动计算并显示相应数量的数据项,以实现虚拟滚动效果。
要实现虚拟滚动效果,需要对容器进行一些配置。可以使用cdkVirtualScrollViewport
指令和ViewportRuler
服务来达到这个目的。
ViewportRuler
服务,并定义相关属性import { ViewportRuler } from '@angular/cdk/scrolling';
@Component({
...
})
export class MyComponent implements OnInit {
constructor(private viewportRuler: ViewportRuler) { }
// 可以根据实际情况设置容器大小
containerHeight = 400;
containerWidth = 800;
// 定义每个数据项的高度
itemHeight = 30;
// 定义要显示的数据集
items = Array.from({length: 1000}).map((_, i) => `Item #${i}`);
ngOnInit() {
// 计算容器的高度,根据实际情况设置
this.containerHeight = this.viewportRuler.getViewportSize().height - 20;
}
}
上一篇:Angular循环逐个值