mongodb – 如何在角度5中实现无限滚动分页？

2023年6月21日 184次阅读

我需要在角度5中实现无限滚动分页.我尝试了无限滚动,但它无法正常工作.我需要在他们的评论中显示前10个帖子,滚动后10个评论需要再次呼叫服务(10个帖子)并将数据附加到现有帖子. 最佳答案 你可以使用ngx-infinite-scroll.

npm install ngx-infinite-scroll --save

见demo plnkr.

在您的组件模板中：

<div class="search-results"
     data-infinite-scroll
     debounce
     [infiniteScrollDistance]="scrollDistance"
     [infiniteScrollUpDistance]="scrollUpDistance"
     [infiniteScrollThrottle]="throttle"
     (scrolled)="onScrollDown()"
     (scrolledUp)="onUp()">
  <p *ngFor="let i of array">
    {{ i }}
  </p>
</div>

在组件控制器中：

 onScrollDown (ev) {
    console.log('scrolled down!!', ev);

    // add another 10 items
    const start = this.sum;
    this.sum += 10;
    this.appendItems(start, this.sum);

    this.direction = 'down'
  }

  onUp(ev) {
    console.log('scrolled up!', ev);
    const start = this.sum;
    this.sum += 10;
    this.prependItems(start, this.sum);

    this.direction = 'up';
  }

这是通过简单的数据服务完成的,但您可以实现从数据库中检索数据的自定义方法.例如：

// Page 1
db.comments.find().limit(10)

// Page 2
db.comments.find().skip(10).limit(10)

// Page 3
db.comments.find().skip(10).limit(10)
点赞