ng-cw-v12
Version:
Angular UI Component Library
67 lines • 9.56 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class InfiniteScrollComponent {
constructor() {
/** 滚动到底部时回调 */
this.ncReachedBottom = new EventEmitter();
/** 是否禁用检测 */
this._disableDetection = false;
/** 触发加载的距离阈值，单位为px */
this.ncDistance = 0;
/** 防抖延迟（单位ms），默认用户停止滚动触底200ms后执行方法 */
this.ncDelay = 200;
this.scrollSubject = new Subject();
this.isNearBottom = false;
}
set ncDisableDetection(value) {
this._disableDetection = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncDisableDetection() {
return this._disableDetection;
}
ngAfterViewInit() {
this.initScrollListener();
}
initScrollListener() {
const scrollElement = this.scrollContainer.nativeElement;
fromEvent(scrollElement, 'scroll').subscribe(() => {
this.handleScroll(scrollElement);
});
this.scrollSubject.pipe(debounceTime(this.ncDelay), filter(() => !this.ncDisableDetection)).subscribe(() => {
if (this.isNearBottom) {
this.ncReachedBottom.emit();
}
});
}
handleScroll(element) {
const { scrollTop, clientHeight, scrollHeight } = element;
this.isNearBottom = scrollTop + clientHeight >= scrollHeight - this.ncDistance;
if (this.isNearBottom) {
this.scrollSubject.next();
}
}
}
InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InfiniteScrollComponent, selector: "nc-infinite-scroll", inputs: { ncDisableDetection: "ncDisableDetection", ncDistance: "ncDistance", ncDelay: "ncDelay" }, outputs: { ncReachedBottom: "ncReachedBottom" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div #scrollContainer class=\"nc-infinite-scroll\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".nc-infinite-scroll{width:100%;height:100%;overflow:auto}.nc-infinite-scroll::-webkit-scrollbar{width:6px;height:6px}.nc-infinite-scroll::-webkit-scrollbar-thumb{background-color:#cdc9cf;border-radius:10px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.nc-infinite-scroll::-webkit-scrollbar-thumb:hover{background-color:#766d7b}.nc-infinite-scroll::-webkit-scrollbar-track{background:#0000;cursor:pointer}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-infinite-scroll',
templateUrl: './infinite-scroll.component.html',
styleUrls: ['./infinite-scroll.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { scrollContainer: [{
type: ViewChild,
args: ['scrollContainer']
}], ncReachedBottom: [{
type: Output
}], ncDisableDetection: [{
type: Input
}], ncDistance: [{
type: Input
}], ncDelay: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5maW5pdGUtc2Nyb2xsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvaW5maW5pdGUtc2Nyb2xsL2luZmluaXRlLXNjcm9sbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2luZmluaXRlLXNjcm9sbC9pbmZpbml0ZS1zY3JvbGwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBT3RELE1BQU0sT0FBTyx1QkFBdUI7SUFxQmxDO1FBbEJBLGVBQWU7UUFDTCxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDL0MsYUFBYTtRQUNMLHNCQUFpQixHQUFZLEtBQUssQ0FBQztRQU8zQyxzQkFBc0I7UUFDYixlQUFVLEdBQVcsQ0FBQyxDQUFDO1FBQ2hDLHNDQUFzQztRQUM3QixZQUFPLEdBQVcsR0FBRyxDQUFDO1FBRXZCLGtCQUFhLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUNwQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztJQUViLENBQUM7SUFkakIsSUFBYSxrQkFBa0IsQ0FBQyxLQUF1QjtRQUNyRCxJQUFJLENBQUMsaUJBQWlCLEdBQUcsS0FBSyxLQUFLLElBQUksSUFBSSxLQUFLLEtBQUssU0FBUyxJQUFJLEtBQUssS0FBSyxLQUFLLElBQUksS0FBSyxLQUFLLE9BQU8sQ0FBQztJQUN6RyxDQUFDO0lBQ0QsSUFBSSxrQkFBa0I7UUFDcEIsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDaEMsQ0FBQztJQVdELGVBQWU7UUFDYixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRU8sa0JBQWtCO1FBQ3hCLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1FBRXpELFNBQVMsQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNoRCxJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ25DLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ3JCLFlBQVksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQzFCLE1BQU0sQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUN2QyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDZixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7Z0JBQ3JCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDN0I7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyxZQUFZLENBQUMsT0FBb0I7UUFDdkMsTUFBTSxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEdBQUcsT0FBTyxDQUFDO1FBQzFELElBQUksQ0FBQyxZQUFZLEdBQUcsU0FBUyxHQUFHLFlBQVksSUFBSSxZQUFZLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUMvRSxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDckIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7O29IQWxEVSx1QkFBdUI7d0dBQXZCLHVCQUF1QixtVUNUcEMsZ0dBRU07MkZET08sdUJBQXVCO2tCQUxuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFdBQVcsRUFBRSxrQ0FBa0M7b0JBQy9DLFNBQVMsRUFBRSxDQUFDLGtDQUFrQyxDQUFDO2lCQUNoRDswRUFFdUMsZUFBZTtzQkFBcEQsU0FBUzt1QkFBQyxpQkFBaUI7Z0JBR2xCLGVBQWU7c0JBQXhCLE1BQU07Z0JBR00sa0JBQWtCO3NCQUE5QixLQUFLO2dCQU9HLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmcm9tRXZlbnQsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25jLWluZmluaXRlLXNjcm9sbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2luZmluaXRlLXNjcm9sbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaW5maW5pdGUtc2Nyb2xsLmNvbXBvbmVudC5sZXNzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEluZmluaXRlU2Nyb2xsQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQFZpZXdDaGlsZCgnc2Nyb2xsQ29udGFpbmVyJykgcHJpdmF0ZSBzY3JvbGxDb250YWluZXIhOiBFbGVtZW50UmVmO1xyXG5cclxuICAvKiog5rua5Yqo5Yiw5bqV6YOo5pe25Zue6LCDICovXHJcbiAgQE91dHB1dCgpIG5jUmVhY2hlZEJvdHRvbSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICAvKiog5piv5ZCm56aB55So5qOA5rWLICovXHJcbiAgcHJpdmF0ZSBfZGlzYWJsZURldGVjdGlvbjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNldCBuY0Rpc2FibGVEZXRlY3Rpb24odmFsdWU6IGJvb2xlYW4gfCBzdHJpbmcpIHtcclxuICAgIHRoaXMuX2Rpc2FibGVEZXRlY3Rpb24gPSB2YWx1ZSAhPT0gbnVsbCAmJiB2YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHZhbHVlICE9PSBmYWxzZSAmJiB2YWx1ZSAhPT0gJ2ZhbHNlJztcclxuICB9XHJcbiAgZ2V0IG5jRGlzYWJsZURldGVjdGlvbigpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLl9kaXNhYmxlRGV0ZWN0aW9uO1xyXG4gIH1cclxuICAvKiog6Kem5Y+R5Yqg6L2955qE6Led56a76ZiI5YC877yM5Y2V5L2N5Li6cHggKi9cclxuICBASW5wdXQoKSBuY0Rpc3RhbmNlOiBudW1iZXIgPSAwO1xyXG4gIC8qKiDpmLLmipblu7bov5/vvIjljZXkvY1tc++8ie+8jOm7mOiupOeUqOaIt+WBnOatoua7muWKqOinpuW6lTIwMG1z5ZCO5omn6KGM5pa55rOVICovXHJcbiAgQElucHV0KCkgbmNEZWxheTogbnVtYmVyID0gMjAwO1xyXG5cclxuICBwcml2YXRlIHNjcm9sbFN1YmplY3QgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xyXG4gIHByaXZhdGUgaXNOZWFyQm90dG9tID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5pdFNjcm9sbExpc3RlbmVyKCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGluaXRTY3JvbGxMaXN0ZW5lcigpOiB2b2lkIHtcclxuICAgIGNvbnN0IHNjcm9sbEVsZW1lbnQgPSB0aGlzLnNjcm9sbENvbnRhaW5lci5uYXRpdmVFbGVtZW50O1xyXG5cclxuICAgIGZyb21FdmVudChzY3JvbGxFbGVtZW50LCAnc2Nyb2xsJykuc3Vic2NyaWJlKCgpID0+IHtcclxuICAgICAgdGhpcy5oYW5kbGVTY3JvbGwoc2Nyb2xsRWxlbWVudCk7XHJcbiAgICB9KTtcclxuXHJcbiAgICB0aGlzLnNjcm9sbFN1YmplY3QucGlwZShcclxuICAgICAgZGVib3VuY2VUaW1lKHRoaXMubmNEZWxheSksXHJcbiAgICAgIGZpbHRlcigoKSA9PiAhdGhpcy5uY0Rpc2FibGVEZXRlY3Rpb24pXHJcbiAgICApLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIGlmICh0aGlzLmlzTmVhckJvdHRvbSkge1xyXG4gICAgICAgIHRoaXMubmNSZWFjaGVkQm90dG9tLmVtaXQoKTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGhhbmRsZVNjcm9sbChlbGVtZW50OiBIVE1MRWxlbWVudCk6IHZvaWQge1xyXG4gICAgY29uc3QgeyBzY3JvbGxUb3AsIGNsaWVudEhlaWdodCwgc2Nyb2xsSGVpZ2h0IH0gPSBlbGVtZW50O1xyXG4gICAgdGhpcy5pc05lYXJCb3R0b20gPSBzY3JvbGxUb3AgKyBjbGllbnRIZWlnaHQgPj0gc2Nyb2xsSGVpZ2h0IC0gdGhpcy5uY0Rpc3RhbmNlO1xyXG4gICAgaWYgKHRoaXMuaXNOZWFyQm90dG9tKSB7XHJcbiAgICAgIHRoaXMuc2Nyb2xsU3ViamVjdC5uZXh0KCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgI3Njcm9sbENvbnRhaW5lciBjbGFzcz1cIm5jLWluZmluaXRlLXNjcm9sbFwiPlxyXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG48L2Rpdj4iXX0=