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

分页实际上不适用于移动应用程序。流行的替代方法是使用无限滚动。

通过在显示器上添加HTML元素来工作。首先，您要获取一批要显示的记录（假设是50条），并且当用户到达这些记录的末尾时，将触发无限滚动，您将从服务器和显示屏中获取接下来的50条记录。

通过向您的api调用添加参数limit和offset来完成数据的获取。

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可能对您的特定情况有用。

如何在离子应用程序上添加分页？

1 个答案: