带有角度 8 按钮的无限滚动

Posted 2023-03-07

【中文标题】带有角度 8 按钮的无限滚动

【英文标题】：infinite-scroll with button in angular 8

【发布时间】：2019-12-26 07:07:52

【问题描述】：

我正在尝试使用按钮实现无限滚动。

代码：

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

我可以通过无限滚动来加载服务器内容。但我需要这个带有“加载更多”按钮。 当我点击“加载更多”按钮时，我需要获取接下来的 20 条记录并将其附加到无限滚动等等。

我可以知道这是否可以使用 ngx-infinite-scroll 模块完成吗？

【问题讨论】：

那你为什么需要无限滚动呢？

@Ivan 那么如何在不替换现有内容的情况下追加内容？假设我已经展示了 10 个项目，当我点击“显示更多”按钮时，我需要将这些项目附加到现有内容中

【参考方案1】：

“加载更多”按钮确实违背了无限滚动的目的。如果“加载更多”按钮位于页面底部并且您已经实现了无限滚动，则用户将永远不会到达该按钮。

如果您只需要添加新内容而不替换现有内容，请执行以下操作：

array = array.concat(new_data)

Angular 将正确显示数组的更新内容。 另请查看本教程： https://www.youtube.com/watch?v=jp-c6_pxAns