Angular cdk 虚拟滚动例子

[deepthan]

Angular cdk 虚拟滚动例子

• 英文官方文档
• 中文官方文档
• 源码

module

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollDispatchModule,
  ],
})

component.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'vir-ckd-demo',
  templateUrl: './ckd-demo.component.html',
  styleUrls: ['./ckd-demo.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CkdDemoComponent implements OnInit {
  items = Array.from({ length: 100000 }).map((_, i) => `第${i}个`);
  constructor() {}

  ngOnInit() {}
}

component.html

<cdk-virtual-scroll-viewport itemSize="10" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
</cdk-virtual-scroll-viewport>

==itemSize==注意它的作用

component.css

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}