跳到主要内容
版本：v7

ion-infinite-scroll

无限滚动（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">
    <!-- 你的虚拟滚动内容 -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

无障碍访问​

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

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

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

<ion-content role="feed">
  <ion-list>
    <ion-item role="article"> 第一个项目 </ion-item>
    <ion-item role="article"> 第二个项目 </ion-item>
    ...
  </ion-list>

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

请参阅 ARIA: feed role 文档了解更多信息。

接口​

InfiniteScrollCustomEvent​

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

属性​

disabled​

说明If true, the infinite scroll will be hidden and scroll event listeners will be removed.

Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
属性disabled
类型boolean
默认值false

position​

说明The position of the infinite scroll element. The value can be either top or bottom.
属性position
类型"bottom" ｜ "top"
默认值'bottom'

threshold​

说明The threshold distance from the bottom of the content to call the infinite output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of 10% for the infinite output event to get called when the user has scrolled 10% from the bottom of the page. Use the value 100px when the scroll is within 100 pixels from the bottom of the page.
属性threshold
类型string
默认值'15%'

事件​

Name说明冒泡
ionInfiniteEmitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's complete() method when your async operation has completed.true

方法​

complete​

说明Call complete() within the ionInfinite output event handler when your async operation has completed. For example, the loading state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from loading to enabled.
签名complete() => Promise<void>

CSS 阴影部分​

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

CSS 自定义属性​

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

插槽​

该组件没有可用的插槽。

目录

编辑此页