Ionic 无限滚动

无限滚动组件用于在用户从页面顶部或底部滚动指定**距离**时调用要执行的操作。 当我们必须一次显示大量数据时，它非常有用。

每个移动应用程序都需要一种方法来以较少的点击次数显示大量数据。 在这种情况下，无限滚动对它们起着至关重要的作用。 无限滚动组件的工作方式类似于我们在页面上加载**十个**项目。 现在，当用户滚动这些项目并接近底部时，它会发出一个新的**数据请求**。 此请求获取下一组记录项目，这些项目将被添加到现有项目中。 这个过程会**重复**，直到在用户滚动时以块的形式找到新数据。

当您滚动 Facebook、Instagram 或 Twitter 新闻 feed 区域时，您可以更清楚地理解这一点。 页面总是加载新帖子，您会在屏幕底部看到一个**加载微调器**。

您可以使用标准**<ion-infinite-scroll>** 和 **<ion-infinite-scroll-content>** 组件来访问无限滚动。 表达式 **(ionInfinite) = "loadData($event)"** 在 <ion-infinite-scroll> 中分配，当用户接近定义的距离时调用。 当它完成所有任务时，它将在无限滚动实例上调用**complete()** 方法。 **threshold** 属性告诉从内容底部到调用无限输出内容（在滚动时）的距离。

无限滚动内容

它是组件的子组件，用于显示内容。 它还会更改滚动的外观，这取决于无限滚动的状态。 它包含滚动的选项，例如 **loadingSpinner**、**loadingText** 等。

注意：<ion-infinite-scroll> 组件在 ReactJS 中不受支持。

以下示例说明了 Ionic Scroll 组件在应用程序中的工作方式。

示例

Home.page.html

此 HTML 页面调用事件以显示无限滚动内容。 在这里，表达式 **[disabled] = "numTimesLeft <= 0"** 用于停止滚动。 我们还自定义了加载微调器和加载消息的类型，这些类型在调用该方法并且数据加载正在进行时显示。

Home.page.ts

在此文件中，我们将使用 **for 循环** 方法在页面加载时添加虚拟数据。 当列表到达页面底部时，将调用 **loadData()** 方法。 最后，调用 complete() 方法，它将停止加载器。

输出

当您运行应用程序时，它将给出以下输出。

现在，当列表到达页面底部时，页面会重复，直到在用户滚动时以块的形式找到新数据。