时间戳

首页 > 解决方案 > 如何使用角度 5+ 的无限滚动？

html - 如何使用角度 5+ 的无限滚动？

问题描述

我正在关注本教程，但不确定它是否已过时。

我正在使用@angular/core": "^5.2.0"所以我正在使用这个版本 ngx-infinite-scroll@0.8.3

我已经添加了：

import { InfiniteScrollModule } from 'ngx-infinite-scroll'; 并InfiniteScrollModule在 app.module.ts 中导入。

在Search.component.ts我添加了directives: [InfiniteScroll]tp@Component但当我通过选项卡浏览“ngx-infinite-scroll”中的选项时它似乎不再存在，我可以看到InfiniteScrollDirective但没有实现它。

我可以让应用程序编译的唯一方法是摆脱directives: [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;
}

我的问题是什么可以实现无限滚动？

标签： htmlangularinfinite-scroll

解决方案

你不需要directives: [InfiniteScroll]。模块里面的 Import 就足够了。

关于滚动本身 - 您是否看到对您定义的函数的调用（onScroll()）？

基本上，(scrolled)只要包含指令的元素的一定百分比显示在视口中（默认情况下为 80%），该指令就会调用该函数。

例如，如果您有一个高度为 500px 的表格，那么当它的 400px 将进入视口（您在屏幕上看到的内容）时，将调用滚动函数。

推荐阅读