Flutter教程

ion-infinite-scroll

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4上拉分页组件ion-infinite-scroll对项目进行布局。

ion-infinite-scroll官方文档地址:https://ionicframework.com/docs/api/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.

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

Attribute disabled
Type boolean
Default false

position

Description

The position of the infinite scroll element. The value can be either top or bottom.

Attribute position
Type "bottom" | "top"
Default 'bottom'

threshold

Description

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

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

Signature complete() => void