在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

你可以实现ionic的infinite scroll特性，并且可以在构造函数中用你想要的项目数组来初始化你的项目数组，在你的例子中，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);
}

Answer 2

您可以将切片管道与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个项目(slice = 5)。当调用doInfinite时，切片的值增加为5，因此您将显示10个项目。

希望能对你有所帮助！