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.

基本用法​

🌐 Basic Usage

加载文本和加载控件​

🌐 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">
    
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
note

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

无障碍​

🌐 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: feed 角色 文档以获取更多信息。

🌐 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.

目录