我正在关注 this教程,我不确定它是否已过时。
我正在使用 @angular/core": "^5.2.0"
所以我正在使用这个版本 ngx-infinite-scroll@0.8.3
我已经添加了:
从'ngx-infinite-scroll'导入{InfiniteScrollModule};
并在 app.module.ts 中导入 InfiniteScrollModule
。
在 Search.component.ts
我添加了 directives: [InfiniteScroll]
tp @Component
但它似乎不再存在当我浏览“ngx-infinite-scroll”中的选项时,我可以看到 InfiniteScrollDirective
但没有实现它。
我可以让应用程序编译的唯一方法是摆脱 指令:[InfiniteScroll]
但无限滚动不起作用(它只是一个普通的滚动)。
HTML:
<div class="search-results"
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"
(scrolled)="onScroll()">
<div *ngFor="let name of ['a','a','b','e','r','t','t','e','b','e','r','t','ererer','a','a','b','e','r','t','t','e','b','e','r','t','ererer']">
<div>
{{name}}
</div>
</div>
</div>
CSS:
.search-results {
height: 100px;
overflow-y: scroll;
}
我的问题是什么可以实现无限滚动?
最佳答案
您不需要指令:[InfiniteScroll]
。模块内部的 Import 就足够了。
关于滚动本身 - 您是否看到对您定义的函数 (onScroll()
) 的调用?
基本上,只要包含指令的元素的一定百分比显示在视口(viewport)中(默认为 80%),指令就会调用 (scrolled)
函数。
例如,如果您有一个高度为 500px 的表格,那么当它的 400px 将进入视口(viewport)(您在屏幕上看到的内容)时,将调用滚动函数。
关于html - 如何使用 angular 5+ 的无限滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51986226/