我怎么能在我的应用程序离子添加分页？

Question

我从我的WordPress网站建设一个移动应用程序，我正从我的WordPress网站上的内容，但我不知道如何更将数据加载到页面

这里是我的html代码：

 <ion-list>
    <ion-item *ngFor="let item of getData">{{item}}</ion-item>
    </ion-list>      
       <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll> 
 </ion-list> 

这里是我的TS文件：

   import { Component } from '@angular/core';
   import {  NavController, NavParams, Item } from 'ionic- angular';
   import { Api, Items } from '../../providers';
   import { HttpClient } from '@angular/common/http';
     @IonicPage()
     @Component({
        selector: 'page-latest',
        templateUrl: 'latest.html',
    })
    export class LatestPage {
        currentItems: Item[];
        item: any;
        getData: Object;
 constructor(public navCtrl: NavController, toastCtrl: ToastController, 
 public api:Api, navParams: NavParams, items: Items,public 
  http:HttpClient) 
 {   
    this.api.getPosts().subscribe(data=>{
    console.log(data)
    this.getData = data
  })
 }
    doInfinite(infiniteScroll: any) { 
    this.api.getPosts().subscribe(data=>{
    console.log(data)
    this.getData = data
 })
   infiniteScroll.complete()
  }
    openItem(item){
    this.navCtrl.push('ItemDetailPage', {
    itemName: item
   });
  }
 }

我需要的时候，我们向下滚动到要显示的数据。

Answer 1

分页并没有真正在移动应用中使用。流行的替代是，是使用inifnite滚动。

它的工作原理是由显示设备上添加一个HTML元素。你先取了一批记录显示（比方说50），当用户达到这些记录的结束，无限滚动被触发，你从服务器获取和显示在未来的50条记录。

数据读取是通过添加参数limit＆offset你的API调用来完成。

data; //data to display

getData(limit, offset) {
    this.http.get(API_URL"+&limit="+limit+"&offset="+offset,{}).subscribe((response) =>{
        this.data.push(response);
    }
}

doInfinite(infiniteScroll) {
    //Calculate your limit & offset values
    this.getData(this.limit, this.offset);
    infiniteScroll.complete();
}

这tutorial可能是你的具体情况有帮助的。