Question

我正在尝试使用角度4 app中的ngx-infinite-scroll实现无限滚动，但它没有被触发。我阅读文档并设置元素的height并将scrollWindow设置为false，以便在元素滚动时触发，而不是整个页面。但是我无法解雇它。

我在做什么？

我创建了plnkr来重现问题

HTML

<div class="search-results"
     infinite-scroll
     [infiniteScrollDistance]="0.1"
     [infiniteScrollThrottle]="10"
     [scrollWindow]="false"
     (scrolled)="onScrollDown()">
  <p *ngFor="let i of is">
    {{i}}
  </p>
</div>

CSS

.search-results {
  height: 100px;
  overflow: scroll;
}

成分</ P>

protected is = ['Item1', 'Item2', 'Item3'];

onScrolledDown() {
    console.log("scrolled");
}

Answer 1

我想我已经找到了一些解决方法，通过将 infiniteScrollThrottle 设置为 0 来解决这个问题，并创建自己的节流方法。

我是这样做的：

在 HTML 端，使用这些属性：

[infiniteScrollThrottle]="0"
(scrolled)="loadMore()"

另一方面，在 ts 文件中，在 loadMore() 函数中设置自己的节流条件：

loading = false;
loadingThrottle = 300;

loadMore() {
    if (!this.loading) {
      this.loading = true;

      window.setTimeout(() => {

        // your loading logic here..

        this.loading = false;
      }, this.loadingThrottle);
   }
}

Answer 2

我使用bootstrap 4，因此您必须禁用flex以使其正常工作

"..\vendors\OpenCL\Intel\bin\ioc32.exe -cmd=build -input="xxx" -device=gpu -spir32="FileName%" -bo="-cl-std=CL1.2 -I %ProjetcDir%\cl"

滚动完成时不会触发ngx-infinite-scroll事件

2 个答案: