Question

我正在使用angular 2无限滚动模块，我希望一次显示10个元素，当用户点击scrollDown（）时，必须显示接下来的10个元素，并且应该相应地更新滚动条，尝试各种方法，但到目前为止没有任何工作，任何形式的帮助将不胜感激。感谢。

这是我的代码。

`infinite-scroll
            [infiniteScrollDistance]="2"

            [infiniteScrollThrottle]="500"

            [scrollWindow]="false"
            (scrolled)="onScrollDown()"
            (scrolledUp)="onScrollUp()"

  style="overflow: auto;height:250px;width:350px" >
            <div class="scrollBar">
            <ul *ngFor="let item of list" >
             <li>{{item}}</li>
            </ul>
            </div>`

Answer 1

您可以使用切片管道来限制您在屏幕上看到的项目。

您需要一个变量来保持屏幕上显示的项目总数。

一个简单的例子如下：

<div>
  <h2 (click)="limit=limit+2">more</h2>
  <ul>
    <li *ngFor="let item of list | slice:0:limit">{{item}}</li>
  </ul>
  {{limit}}
</div>

您可以看到它正常工作here。

在您的情况下，我猜您可以使用（滚动）来增加限制。

<div infinite-scroll
            [infiniteScrollDistance]="2"

            [infiniteScrollThrottle]="500"

            [scrollWindow]="false"
            (scrolled)="limit=limit+10"
            (scrolledUp)="onScrollUp()"

  style="overflow: auto;height:250px;width:350px" >
            <div class="scrollBar">
            <ul *ngFor="let item of list | slice:0:limit" >
             <li>{{item}}</li>
            </ul>
            </div>

如何使用angular2-infinite-scroll模块一次显示10个元素？

1 个答案: