ng-cw-v12
Version:
Angular UI Component Library
192 lines (183 loc) • 12.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/virtual-scroll', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["virtual-scroll"] = {}), global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var VirtualScrollComponent = /** @class */ (function () {
function VirtualScrollComponent(ngZone) {
this.ngZone = ngZone;
/** 列表数据 */
this.ncItems = [];
/** 缓冲item数量，前后各2项 */
this.ncBufferCount = 2;
this.initialized = false; // 标记 itemHeight 是否已初始化（模板中 *ngIf 使用，需为 public）
this.viewInitialized = false; // 标记 ngAfterViewInit 是否已执行（templateContainer 才可用）
this.visibleItems = []; //显示items
this.totalPadding = 0; //总填充高度
this.topPadding = 0;
this.scrollTop = 0; //已滚动高度
this.itemHeight = 1; //若设为0，下方代码获取不到this.templateContainer
this.viewportHeight = 0; //视窗可视高度
}
/**
* 场景 触发行 原因
* 初始就有值（同步） 第 49 行measureAndUpdate ngOnChanges 先执行但 viewInitialized=false 跳过，由 ngAfterViewInit 补调
* 初始无值，后续赋值（异步） 第 75 行measureAndUpdate ngAfterViewInit 时无数据跳过，数据到达时 ngOnChanges 直接调用
*/
VirtualScrollComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.viewportHeight = this.viewport.nativeElement.clientHeight;
this.viewInitialized = true;
// 若 ncItems 在 ngAfterViewInit 之前就已同步赋值，则在此补充执行初始化
if (!this.initialized && this.ncItems.length > 0) {
this.measureAndUpdate();
}
// 监听 viewport 容器高度变化，在 Angular 区域外观察以避免频繁触发变更检测
this.ngZone.runOutsideAngular(function () {
_this.resizeObserver = new ResizeObserver(function (entries) {
var newHeight = entries[0].contentRect.height;
if (newHeight !== _this.viewportHeight) {
_this.ngZone.run(function () {
_this.viewportHeight = newHeight;
_this.updateVisibleItems();
});
}
});
_this.resizeObserver.observe(_this.viewport.nativeElement);
});
};
VirtualScrollComponent.prototype.ngOnDestroy = function () {
var _a;
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
};
VirtualScrollComponent.prototype.ngOnChanges = function (changes) {
if (changes['ncItems'] && this.ncItems.length > 0) {
if (!this.initialized) {
// templateContainer 仅在 ngAfterViewInit 后可用，未初始化则等待
if (this.viewInitialized) {
this.measureAndUpdate();
}
// 否则由 ngAfterViewInit 补调，无需处理
}
else {
this.updateTotalPadding();
this.updateVisibleItems();
}
}
};
/** 测量 itemHeight 并更新列表（需在 ngAfterViewInit 之后调用） */
VirtualScrollComponent.prototype.measureAndUpdate = function () {
var _this = this;
// setTimeout(0) 确保 Angular 已完成本次 DOM 渲染
setTimeout(function () {
var _a, _b;
var element = (_b = (_a = _this.templateContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.firstChild;
if (element) {
var styles = getComputedStyle(element);
_this.itemHeight = element.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
_this.initialized = true;
}
_this.updateTotalPadding();
_this.updateVisibleItems();
});
};
VirtualScrollComponent.prototype.onScroll = function () {
var _this = this;
this.ngZone.run(function () {
_this.scrollTop = _this.viewport.nativeElement.scrollTop;
_this.updateVisibleItems();
});
};
VirtualScrollComponent.prototype.updateVisibleItems = function () {
var firstVisibleIndex = Math.floor(this.scrollTop / this.itemHeight);
var startIndex = Math.max(0, firstVisibleIndex - this.ncBufferCount);
var visibleItemsCount = Math.ceil(this.viewportHeight / this.itemHeight);
var endIndex = Math.min(firstVisibleIndex + visibleItemsCount + this.ncBufferCount, this.ncItems.length - 1);
this.visibleItems = [];
for (var i = startIndex; i <= endIndex; i++) {
this.visibleItems.push({ index: i, data: this.ncItems[i] });
}
this.topPadding = startIndex * this.itemHeight;
};
VirtualScrollComponent.prototype.updateTotalPadding = function () {
this.totalPadding = this.ncItems.length * this.itemHeight;
};
//采用trackBy提升性能，只渲染改变的dom
VirtualScrollComponent.prototype.trackByIndex = function (index, item) {
return item.index;
};
return VirtualScrollComponent;
}());
VirtualScrollComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VirtualScrollComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
VirtualScrollComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<!-- \u7528\u4E8E\u6D4B\u91CF itemHeight \u7684\u9690\u85CF\u63A2\u9488\uFF0C\u4EC5\u5728\u521D\u59CB\u5316\u524D\u4E14\u6709\u6570\u636E\u65F6\u6E32\u67D3\uFF0C\u4E0E visibleItems \u5B8C\u5168\u89E3\u8026 -->\r\n<div #templateContainer *ngIf=\"!initialized && ncItems.length > 0\"\r\n style=\"visibility:hidden;position:absolute;pointer-events:none;\">\r\n <ng-container [ngTemplateOutlet]=\"ncItemTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: ncItems[0], index: 0}\"></ng-container>\r\n</div>\r\n\r\n<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 *ngFor=\"let item of visibleItems; trackBy: trackByIndex\">\r\n <ng-container [ngTemplateOutlet]=\"ncItemTemplate\"\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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VirtualScrollComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
styleUrls: ['./virtual-scroll.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { viewport: [{
type: i0.ViewChild,
args: ['viewport', { static: true }]
}], templateContainer: [{
type: i0.ViewChild,
args: ['templateContainer']
}], ncItems: [{
type: i0.Input
}], ncItemTemplate: [{
type: i0.Input
}], ncBufferCount: [{
type: i0.Input
}] } });
var NcVirtualScrollModule = /** @class */ (function () {
function NcVirtualScrollModule() {
}
return NcVirtualScrollModule;
}());
NcVirtualScrollModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVirtualScrollModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcVirtualScrollModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVirtualScrollModule, declarations: [VirtualScrollComponent], imports: [i1.CommonModule], exports: [VirtualScrollComponent] });
NcVirtualScrollModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVirtualScrollModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVirtualScrollModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
VirtualScrollComponent
],
imports: [
i1.CommonModule
],
exports: [
VirtualScrollComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcVirtualScrollModule = NcVirtualScrollModule;
exports.VirtualScrollComponent = VirtualScrollComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-virtual-scroll.umd.js.map