Angular 4: поведение по умолчанию для бесконечной прокрутки не работает

Question

Angular 4: поведение по умолчанию для бесконечной прокрутки не работает

1

Я пытаюсь реализовать бесконечный свиток в моем приложении Angular 4. Я следил за всеми направлениями из https://www.npmjs.com/package/ngx-infinite-scroll

В документе говорится:

По умолчанию директива прослушивает событие прокрутки окна и вызывает обратный вызов. Чтобы вызвать обратный вызов, когда прокручивается фактический элемент, эти параметры должны быть настроены:

[ScrollWindow] = "ложь"

установить значение элемента css "height" для элемента

Но в моем случае не запускается событие прокрутки окна по умолчанию. Вместо этого, если я устанавливаю высоту для элемента div и устанавливаю [scrollWindow] = "false", тогда он работает в этом случае. Я не знаю, чего мне не хватает.

Пример импорта данных в документе

{ platformBrowserDynamic } from '@angular/platform-browser-dynamic';

но я не импортировал это в свой модуль. Это вызывает проблему. Я думаю, что это не причина.

Любая помощь будет оценена. Благодарю.

Prabesh 19 сен. 2017, в 19:49

Источник

0

Есть ли у div, который вы поместили директиву data-infinite-scroll , явно установленную высоту?
Mihailo 19 сен. 2017, в 17:36
0

Да. Нужно ли устанавливать высоту для поведения по умолчанию?
Prabesh 20 сен. 2017, в 04:02

Теги:

angular

javascript

infinite-scroll

nginfinitescroll

1 ответ

Ещё вопросы

Есть ли у div, который вы поместили директиву data-infinite-scroll , явно установленную высоту?
Да. Нужно ли устанавливать высоту для поведения по умолчанию?

armache · Answer 1 · 2018-01-09T16-33-00.000Z

Вы можете добиться бесконечной функциональности прокрутки без установки дополнительных пакетов. Следующий пример работает для меня.

app.component.ts

export class AppComponent
{
    stones: Array<any>
    margin: number = 10;

    constructor() {

        this.stones = new Array<Object>();
        this.populate(this.margin);
    }

    onScroll(event: any) {

        if (((window.innerHeight + window.scrollY + 1) >= document.body.offsetHeight) || ((window.innerHeight + document.documentElement.scrollTop) >= document.body.offsetHeight)) {
            this.populate(this.margin);
        }
    }

    populate(margin: number): void {

        for (let i = 0; i < margin; i++) {
            this.stones.push(new Object());
        }
    }
}

и ваш app.component.html

<div (window:scroll)="onScroll($event)">
    <div *ngFor="let item of stones">
        <div style="width:100px; height:60px; background-color:green;margin:20px"></div>
    </div>
</div>