Open deepthan opened 3 years ago
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; }
Angular cdk 虚拟滚动例子
==itemSize==注意它的作用