Question

我正在尝试在Angular 4应用程序中实现无限滚动。我已按照https://www.npmjs.com/package/ngx-infinite-scroll

的所有说明进行操作

在文件中说：

默认情况下，指令侦听窗口滚动事件并调用回调。   要在滚动实际元素时触发回调，应配置以下设置：


[滚屏] =＆＃34;假＆＃34;

设置一个明确的css＆＃34;身高＆＃34;值元素

但是在我的情况下不会触发默认窗口滚动事件。相反，如果我为div元素设置一个高度并设置[scrollWindow] =＆＃34; false＆＃34;，那么它适用于那种情况。我不知道我错过了什么。

给定文档导入中的示例

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

但我没有在我的模块中导入它。这是导致这个问题的原因。我认为这不是原因。

任何帮助将不胜感激。感谢。

Answer 1

您可以在不安装额外软件包的情况下实现无限滚动功能。以下示例适用于我。

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>

Angular 4：无限滚动默认行为无效

1 个答案: