mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
docs(infinite-scroll): update infinite scroll readme files and usage
This commit is contained in:
@ -1,29 +1,16 @@
|
||||
# ion-infinite-scroll
|
||||
|
||||
The Infinite Scroll allows you to perform an action when the user
|
||||
scrolls a specified distance from the bottom or top of the page.
|
||||
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.
|
||||
|
||||
The expression assigned to the `ionInfinite` event is called when
|
||||
the user scrolls to the specified distance. When this expression
|
||||
has finished its tasks, it should call the `complete()` method
|
||||
on the infinite scroll instance.
|
||||
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.
|
||||
|
||||
## Infinite Scroll Content
|
||||
|
||||
By default, Ionic uses the infinite scroll spinner that looks
|
||||
best for the platform the user is on. However, you can change the
|
||||
default spinner or add text by adding properties to the
|
||||
`ion-infinite-scroll-content` component.
|
||||
The `ion-infinite-scroll` component has the infinite scroll logic. It requires a child component in order to display content. Ionic uses its `ion-infinite-scroll-content` component by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. However, the default spinner can be changed and text can be added by setting properties on the `ion-infinite-scroll-content` component.
|
||||
|
||||
## Further Customizing Infinite Scroll Content
|
||||
## Custom Content
|
||||
|
||||
The `ion-infinite-scroll` component holds the infinite scroll logic.
|
||||
It requires a child component in order to display the content.
|
||||
Ionic uses `ion-infinite-scroll-content` by default. This component
|
||||
displays the infinite scroll and changes the look depending
|
||||
on the infinite scroll's state. Separating these components allows
|
||||
developers to create their own infinite scroll content components.
|
||||
You could replace our default content with custom SVG or CSS animations.
|
||||
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.
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
@ -3,8 +3,8 @@
|
||||
<ion-list></ion-list>
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
loading-spinner="bubbles"
|
||||
loading-text="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
|
Reference in New Issue
Block a user