跳到主要内容
版本：v7

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">
    <!-- 你的虚拟滚动内容 -->
  </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 角色 文档。

接口​

InfiniteScrollCustomEvent​

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

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

属性​

disabled​

DescriptionIf 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.
Attributedisabled
Typeboolean
Defaultfalse

position​

DescriptionThe position of the infinite scroll element. The value can be either top or bottom.
Attributeposition
Type"bottom" ｜ "top"
Default'bottom'

threshold​

DescriptionThe 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.
Attributethreshold
Typestring
Default'15%'

事件​

NameDescriptionBubbles
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​

DescriptionCall 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.
Signaturecomplete() => Promise<void>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS 自定义属性​

No CSS custom properties available for this component.

插槽​

No slots available for this component.

Contents

编辑此页