@angular/cdk-experimental/scrolling源碼總結

iwe7-scrolling

@copy from @angular/cdk-experimental

CdkVirtualScrollViewport Component

selector cdk-virtual-scroll-viewport

// inputs
@Input() orientation: "horizontal" | "vertical" = "vertical";
複製代碼

CdkVirtualForOf Directive

selector [cdkVirtualFor][cdkVirtualForOf]

// inputs
@Input() cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;
@Input() cdkVirtualForTrackBy: TrackByFunction<T> | undefined;
@Input() cdkVirtualForTemplate: TemplateRef<CdkVirtualForOfContext<T>>;
@Input() cdkVirtualForTemplateCacheSize: number = 20;
// 屬性
viewChange = new Subject<ListRange>();
// 方法
measureRangeSize(range: ListRange,orientation: "horizontal" | "vertical"): number;
複製代碼

CdkAutoSizeVirtualScroll Directive

selector cdk-virtual-scroll-viewport[autosize]

// inputs
@Input() minBufferPx: number = 100;
@Input() addBufferPx: number = 200;
複製代碼

``

selector cdk-virtual-scroll-viewport[itemSize]

@Input() itemSize: number = 20;
@Input() bufferSize: number = 5;
複製代碼

VirtualScrollStrategy Interface

export interface VirtualScrollStrategy {
  /** * Attaches this scroll strategy to a viewport. * @param viewport The viewport to attach this strategy to. */
  attach(viewport: CdkVirtualScrollViewport): void;

  /** Detaches this scroll strategy from the currently attached viewport. */
  detach(): void;

  /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */
  onContentScrolled();

  /** Called when the length of the data changes. */
  onDataLengthChanged();

  /** Called when the range of items rendered in the DOM has changed. */
  onContentRendered();

  /** Called when the offset of the rendered items changed. */
  onRenderedOffsetChanged();
}
複製代碼

ItemSizeAverager Class

AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy Class

FixedSizeVirtualScrollStrategy implements VirtualScrollStrategy Class