我需要在 Angular 5 中实现无限滚动分页。我尝试过无限滚动,但它无法正常工作。我需要显示前 10 条帖子及其评论,滚动后这 10 条评论需要再次调用服务(10 条帖子)并将数据附加到现有帖子中。
您可以使用ngx-无限滚动.
npm install ngx-infinite-scroll --save
查看演示plnkr https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview.
在您的组件模板中:
<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)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)