跳到主要内容
版本：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 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 Shadow Parts​

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

CSS 自定义属性​

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

插槽​

该组件没有可用的插槽。

目录

编辑此页