Question

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

ion-infinite-scroll-content 官方文档地址：https://ionicframework.com/docs/api/infinite-scroll-content

The ion-infinite-scroll-content component is the default child used by the ion-infinite-scroll . It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the loadingSpinner and loadingText properties.

ion-infinite-scroll-content 用法 Usage

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items; let index">
      <ion-avatar slot="start">
        <img [src]="'https://picsum.photos/80/80?random='      + index" alt="avatar" />
      </ion-avatar>
      <ion-label>{{ item }}</ion-label>
    </ion-item>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

import { Component, OnInit } from '@angular/core';

import { InfiniteScrollCustomEvent } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.scss'],
})
export class ExampleComponent implements OnInit {
  items = [];

  ngOnInit() {
    this.generateItems();
  }

  private generateItems() {
    const count = this.items.length + 1;
    for (let i = 0; i < 50; i++) {
      this.items.push(`Item ${count + i}`);
    }
  }

  onIonInfinite(ev) {
    this.generateItems();
    setTimeout(() => {
      (ev as InfiniteScrollCustomEvent).target.complete();
    }, 500);
  }
}

ion-infinite-scroll-content 属性 Properties

loadingSpinner
Description	An animated SVG spinner that shows while loading.
Attribute	loading-spinner
Type	"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined
loadingText
Description	Optional text to display while loading. loadingText can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic> For more information: Security Documentation
Attribute	loading-text
Type	string | undefined