ion-infinite-scroll
Ionic4项目中我们可以使用Ionic4上拉分页组件ion-infinite-scroll对项目进行布局。 ion-infinite-scroll官方文档地址:https://ionicframework.com/docs/api/infinite-scrollThe 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 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
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.
Custom Content
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.
ion-infinite-scroll 用法(Usage)
<ion-content>
<ion-button (click)="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
ion-button>
<ion-list>ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
ion-infinite-scroll-content>
ion-infinite-scroll>
ion-content>
import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
selector: 'infinite-scroll-example',
templateUrl: 'infinite-scroll-example.html',
styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
constructor() {}
loadData(event) {
setTimeout(() => {
console.log('Done');
event.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
event.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
}
<ion-content>
<ion-button onClick="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
ion-button>
<ion-list>ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more data...">
ion-infinite-scroll-content>
ion-infinite-scroll>
ion-content>
const infiniteScroll = document.getElementById('infinite-scroll');
infiniteScroll.addEventListener('ionInfinite', function(event) {
setTimeout(function() {
console.log('Done');
event.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
event.target.disabled = true;
}
}, 500);
});
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
import React, { Component } from 'react';
import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
export default class Example extends Component<Props, State> {
ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
constructor() {
this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
}
loadData = (ev: MouseEvent) => {
setTimeout(() => {
console.log('Done');
ev.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
ev.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll = () => {
this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
}
render() {
return (
<>
<IonContent>
<IonButton onClick="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
IonButton>
<IonList>IonList>
<IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data...">
IonInfiniteScrollContent>
IonInfiniteScroll>
IonContent>
>
);
}
}
ion-infinite-scroll 属性(Properties)
disabled | |
---|---|
Description | If 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. |
Attribute | disabled |
Type | boolean |
Default | false |
position | |
Description | The position of the infinite scroll element.
The value can be either |
Attribute | position |
Type | "bottom" | "top" |
Default | 'bottom' |
threshold | |
Description | The threshold distance from the bottom
of the content to call the |
Attribute | threshold |
Type | string |
Default | '15%' |
ion-infinite-scroll 事件(Events)
Name | Description |
---|---|
ionInfinite | Emitted 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. |
ion-infinite-scroll 内置方法(Methods)
complete | |
---|---|
Description | Call |
Signature | complete() => void |