ng-cw-v12
Version:
Angular UI component library
108 lines (103 loc) • 6.66 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class VirtualScrollComponent {
constructor(ngZone) {
this.ngZone = ngZone;
this.ncItems = [];
this.ncBufferCount = 2; //缓冲item数量，前后各2项
this.visibleItems = []; //显示items
this.totalPadding = 0; //总填充高度
this.topPadding = 0;
this.scrollTop = 0; //已滚动高度
this.itemHeight = 1; //若设为0，下方代码获取不到this.templateContainer
this.viewportHeight = 0; //视窗可视高度
}
ngAfterViewInit() {
const element = this.templateContainer.nativeElement.firstChild;
const styles = getComputedStyle(element);
this.itemHeight = element.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom); //先获取item高度
this.viewportHeight = this.viewport.nativeElement.clientHeight; //视窗可视高度
this.updateVisibleItems();
this.updateTotalPadding();
}
ngOnChanges(changes) {
if (changes['ncItems']) {
this.updateTotalPadding();
this.updateVisibleItems();
}
}
onScroll() {
this.ngZone.run(() => {
this.scrollTop = this.viewport.nativeElement.scrollTop;
this.updateVisibleItems();
});
}
updateVisibleItems() {
const firstVisibleIndex = Math.floor(this.scrollTop / this.itemHeight);
const startIndex = Math.max(0, firstVisibleIndex - this.ncBufferCount);
const visibleItemsCount = Math.ceil(this.viewportHeight / this.itemHeight);
const endIndex = Math.min(firstVisibleIndex + visibleItemsCount + this.ncBufferCount, this.ncItems.length - 1);
this.visibleItems = [];
for (let i = startIndex; i <= endIndex; i++) {
this.visibleItems.push({ index: i, data: this.ncItems[i] });
}
this.topPadding = startIndex * this.itemHeight;
}
updateTotalPadding() {
this.totalPadding = this.ncItems.length * this.itemHeight;
}
//采用trackBy提升性能，只渲染改变的dom
trackByIndex(index, item) {
return item.index;
}
}
VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VirtualScrollComponent, selector: "nc-virtual-scroll", inputs: { ncItems: "ncItems", ncItemTemplate: "ncItemTemplate", ncBufferCount: "ncBufferCount" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "templateContainer", first: true, predicate: ["templateContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport\" #viewport (scroll)=\"onScroll()\">\r\n <div class=\"total-padding\" [style.height.px]=\"totalPadding\">\r\n <div class=\"item-container\" [style.transform]=\"'translateY(' + topPadding + 'px)'\">\r\n <div #templateContainer *ngFor=\"let item of visibleItems; trackBy: trackByIndex\">\r\n <ng-container [ngTemplateOutlet]=\"ncItemTemplate\" #templateContainer \r\n [ngTemplateOutletContext]=\"{$implicit: item.data, index: item.index}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".viewport{width:100%;height:100%;overflow-y:auto;position:relative}.viewport::-webkit-scrollbar{width:6px;height:6px}.viewport::-webkit-scrollbar-thumb{background-color:#cdc9cf;border-radius:10px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.viewport::-webkit-scrollbar-thumb:hover{background-color:#766d7b}.viewport::-webkit-scrollbar-track{background:#0000;cursor:pointer}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: VirtualScrollComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
styleUrls: ['./virtual-scroll.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { ncItems: [{
type: Input
}], ncItemTemplate: [{
type: Input
}], ncBufferCount: [{
type: Input
}], viewport: [{
type: ViewChild,
args: ['viewport', { static: true }]
}], templateContainer: [{
type: ViewChild,
args: ['templateContainer']
}] } });
class NcVirtualScrollModule {
}
NcVirtualScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVirtualScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcVirtualScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVirtualScrollModule, declarations: [VirtualScrollComponent], imports: [CommonModule], exports: [VirtualScrollComponent] });
NcVirtualScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVirtualScrollModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVirtualScrollModule, decorators: [{
type: NgModule,
args: [{
declarations: [
VirtualScrollComponent
],
imports: [
CommonModule
],
exports: [
VirtualScrollComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcVirtualScrollModule, VirtualScrollComponent };
//# sourceMappingURL=ng-cw-v12-virtual-scroll.js.map