Ionic无限滚动

当用户从页面顶部或底部滚动指定距离时, 无限滚动组件用于调用要执行的动作。当我们必须一次显示大量数据时, 这非常有用。

每个移动应用程序都需要一种方法来以较少的点击次数显示大量数据。在这种情况下, 无限滚动对其起着至关重要的作用。无限滚动组件的工作方式就像我们在页面上加载十个项目。现在, 当用户滚动这些项目并到达底部附近时, 它将发出新的数据请求。该请求获取将添加到现有项目的下一组记录项目。重复此过程, 直到随着用户滚动而在块中找不到新数据为止。

当你滚动Facebook, Instagram或Twitter新闻提要区域时, 你可以更清楚地了解它。该页面始终加载新帖子, 并且你将在屏幕底部看到加载微调框。

你可以使用标准的<ion-infinite-scroll>和<ion-infinite-scroll-content>组件来访问无限滚动。当用户接近定义的距离时, 将调用<ion-infinite-scroll>中分配的表达式（ionInfinite）=“ loadData（$ event）”。完成所有任务后, 它将在无限滚动实例上调用complete()方法。阈值属性指示到内容底部的距离, 以便在滚动时调用无限的输出内容。

无限滚动内容

它是组件的子组件, 用于显示内容。它也改变了滚动的外观, 这取决于无限滚动的状态。它包含用于滚动的选项, 例如loadingSpinner, loadingText等。

注意：<ion-infinite-scroll>组件在ReactJS中不支持。

以下示例说明了Ionic Sc​​roll组件在应用程序中的工作方式。

例

Home.page.html

该HTML页面调用该事件以显示无限滚动内容。在此, 使用表达式[disabled] =“ numTimesLeft <= 0”停止滚动。我们还自定义了加载微调器和加载消息的类型, 这些类型在调用该方法以及正在进行数据加载时显示。

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Infinite Scroll</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <ion-list>
    <ion-item *ngFor="let item of items"> {{item}} </ion-item>
  </ion-list>
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

Home.page.ts

在此文件中, 我们将使用for循环方法在页面加载时添加虚拟数据。当在页面底部到达列表时, 将调用loadData()方法。最后, 调用complete()方法将停止加载程序。

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

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  items = [];
  numTimesLeft = 5;
  constructor() {
    this.addMoreItems();
  }
  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      this.addMoreItems();
      this.numTimesLeft -= 1;
      event.target.complete();
    }, 500);
  }
  addMoreItems() {
    for (let i = 0; i < 10; i++) {
      this.items.push(i);
    }
  }
}

输出量

当你运行该应用程序时, 它将给出以下输出。

现在, 当列表到达页面底部时, 页面将重复, 直到随着用户滚动而在块中找不到新数据为止。