Skip to main content

ion-infinite-scroll

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

¥The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.

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

¥The expression assigned to the ionInfinite event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the complete() method on the infinite scroll instance.

加载文本和加载控件​

¥Loading Text and Spinner

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

¥The ion-infinite-scroll-content is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the ion-infinite-scroll-content component.

定制内容​

¥Custom Content

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

¥Separating the ion-infinite-scroll and ion-infinite-scroll-content components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.

与虚拟滚动一起使用​

¥Usage with Virtual Scroll

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

¥Infinite scroll requires a scroll container. When using a virtual scrolling solution, you will need to disable scrolling on the ion-content and indicate which element container is responsible for the scroll container with the .ion-content-scroll-host class target.

<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 指负责滚动内容的滚动容器。这可能是你正在使用的虚拟滚动解决方案直接提供的组件。

¥virtual-scroll-element refers to the scroll container responsible for scrolling the content. This may be a component provided directly by the virtual scroll solution you are using.

无障碍​

¥Accessibility

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

¥Developers should assign the role="feed" attribute to the scrollable list of items that are added to or removed from as the user scrolls.

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

¥Individual list items should either have role="article" or use the <article> element directly.

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

¥For example, when rendering a collection of items in an 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:饲料作用 文档以获取更多信息。

¥Please refer to the ARIA: feed role documentation for additional information.

接口​

¥Interfaces

InfiniteScrollCustomEvent​

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。

¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

属性​

¥Properties

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%'

事件​

¥Events

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

方法​

¥Methods

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 阴影部分​

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性​

¥CSS Custom Properties

No CSS custom properties available for this component.

插槽​

¥Slots

No slots available for this component.

目录