将无限滚动应用于 ionic-3 应用程序中的 JSON 数组

Question

如何实现对 JSON 数组的无限滚动？我最初只想显示 5 个项目。

data:[
0: Object { id: 123, title: "New family member Khjkjh has joined mymily", mm_family_id: 122, … }
1: Object { id: 124, title: "New family member Hey Dau has joined mymily", mm_family_id: 122, … }
2: Object { id: 125, title: "New family member Hey Dau has joined mymily", mm_family_id: 122, … }
3: Object { id: 126, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
4: Object { id: 127, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
5: Object { id: 128, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
6: Object { id: 129, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
7: Object { id: 130, title: "Abhishek Pandey has commented on post", mm_family_id: 122, … }
8: Object { id: 131, title: "Abhishek Pandey has commented on post", mm_family_id: 122, … }
]

离子信息

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

全局包：

cordova (Cordova CLI) : not installed

本地包：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

系统：

Node : v8.7.0
npm  : 5.6.0
OS   : Windows 10

Answer 1

您可以将切片管道与您的 ngFor 一起使用。 （感谢https://forum.ionicframework.com/t/how-to-implement-ionic-infinite-scroll-to-show-my-array-data/96860/5）

<ion-list>
  <ion-item *ngFor="let i of items  | slice:0:slice">
    your code here
  </ion-item>
</ion-list>

<ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

在您的 .ts 文件中：

slice: number = 5;
doInfinite(infiniteScroll) {
 setTimeout(() => {
  this.slice += 5;
  infiniteScroll.complete();
 }, 300);
}

在第一次迭代中，您将显示前 5 个项目（切片 = 5）。当调用 doInfinite 时，您的 slice 的值会增加 5，因此您将显示 10 个项目。

希望对你有帮助！

Answer 2

您可以实现 ionic 的 infinite scroll 功能，并可以在构造函数中初始化您的 items 数组，并在您的案例中首先显示您想要显示的项目数 5 个项目，以便您可以这样做：

你的html：

<ion-content>
 <ion-list>
   <ion-item *ngFor="let i of items">{{i}}</ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

在你的 ts 中：

items = [];
count: number = 0;

constructor() {
  for (let i = 0; i < 5; i++) {  // here you can limit the items according to your needs.
    this.items.push(data[this.count]);   // your JSON data which you want to display
    this.count++ //i am using a count variable to keep track of inserted records to avoid inserting duplicate records on infinite scroll
  }
}

doInfinite(infiniteScroll) {
  setTimeout(() => {
    for (let i = 0; i < 5; i++) {   
      this.items.push(data[this.count]); // this will start pushing next 5 items
      this.count++
    }

    infiniteScroll.complete();
  }, 500);
}