跳至主要内容
版本：v8

ion-infinite-scroll

当用户从页面底部或顶部滚动指定距离时，无限滚动组件会调用要执行的操作。

分配给 ionInfinite 事件的表达式将在用户到达定义的距离时被调用。当此表达式完成所有任务后，它应该在无限滚动实例上调用 complete() 方法。

加载文本和微调器​

ion-infinite-scroll-content 负责无限滚动交互的视觉显示。默认情况下，此组件会根据无限滚动的状态更改其外观。它显示一个微调器，该微调器最适合用户所在的平台。微调器和加载文本都可以通过在 ion-infinite-scroll-content 组件上设置属性来自定义。

自定义内容​

将 ion-infinite-scroll 和 ion-infinite-scroll-content 组件分开允许开发人员根据需要创建自己的内容组件。此内容可以包含任何内容，从 SVG 元素到具有独特 CSS 动画的元素。

与虚拟滚动一起使用​

无限滚动需要一个滚动容器。当使用虚拟滚动解决方案时，您需要禁用 ion-content 上的滚动，并使用 .ion-content-scroll-host 类目标指示哪个元素容器负责滚动容器。

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
注意

virtual-scroll-element 指的是负责滚动内容的滚动容器。这可能是由您使用的虚拟滚动解决方案直接提供的组件。

无障碍性​

开发人员应将 role="feed" 属性分配给随着用户滚动而添加或删除的项目的可滚动列表。

各个列表项应具有 role="article" 或直接使用 <article> 元素。

例如，当在 ion-list 中渲染项目集合时

<ion-content role="feed">
  <ion-list>
    <ion-item role="article">
      First item
    </ion-item>
    <ion-item role="article">
      Second item
    </ion-item>
    ...
  </ion-list>

  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

有关更多信息，请参阅 ARIA：feed 角色 文档。

接口​

InfiniteScrollCustomEvent​

虽然不是必需的，但此接口可用于代替 CustomEvent 接口，以对从该组件发出的 Ionic 事件进行更强的类型化。

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

属性​

disabled​

描述如果为 true，则无限滚动将被隐藏，并且滚动事件侦听器将被删除。

将其设置为 true 以禁用无限滚动在滚动时主动尝试接收新数据。当已知无法添加更多数据，并且不再需要无限滚动时，这很有用。
属性disabled
类型boolean
默认值false

position​

描述无限滚动元素的位置。该值可以是 top 或 bottom。
属性position
类型"bottom" ｜ "top"
默认值'bottom'

threshold​

描述滚动时调用 infinite 输出事件的内容底部阈值距离。阈值可以是百分比或像素。例如，使用 10% 的值，当用户从页面底部滚动 10% 时，会调用 infinite 输出事件。当滚动距离页面底部 100 像素以内时，请使用值 100px。
属性threshold
类型string
默认值'15%'

事件​

名称描述冒泡
ionInfinite当滚动达到阈值距离时发出。在无限处理程序中，您必须在异步操作完成后调用无限滚动的 complete() 方法。true

方法​

complete​

描述在异步操作完成后，在 ionInfinite 输出事件处理程序中调用 complete()。例如，loading 状态是在应用程序执行异步操作（例如从 AJAX 请求接收更多数据以将更多项目添加到数据列表中）时。数据收到并更新 UI 后，您便可以调用此方法来表明加载已完成。此方法会将无限滚动的状态从 loading 更改为 enabled。
签名complete() => Promise<void>

CSS 阴影部分​

此组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

此组件没有可用的 CSS 自定义属性。

插槽​

此组件没有可用的插槽。

内容

编辑此页面