如何在离子2中进行分页？

Question

我正在写的应用程序有一个包含数千个项目的巨大列表，每个项目都有一个图像来为此数据集创建寻呼机，但我不确定如何执行此操作。我试图在离子2中实现它。如果我要滚动我的项目，它必须将数据发送到后端，就像页面= 1到10和页面= 10到20一样，这样我必须发送它们并且它们会更正它。

Answer 1

放下面的代码在你的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> 

在类文件

下面放：

 doInfinite(infiniteScroll) { 

    let nextpage=this.pageno++; 
    console.log("next page:"+nextpage) 
    this.YourService.Your method(nextpage).subscribe(
      data => { 
       let posts=data.data; 
       for(let post of posts){ 
        // console.log(post); 
        this.posts.push(post); 
       } 

      }, 
      err => { 
       console.log(err); 
      }, 
      () => console.log('Next Page Loading completed') 
     ); 
    infiniteScroll.complete(); 
} 

我希望这会帮助你。

Answer 2

分页在离子3

所有新闻HTML部分

<ion-content > 
     <ion-card *ngFor="let all of allNewsVar"> 
     <ion-list> 
     <ion-item >{{all}}</ion-item> 
     </ion-list> 
     </ion-card> 

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

所有新闻TS文件产品

export class AllNewsPage { 

    allNewsVar = []; 
    pageno:any; 

constructor(public searchService:SearchListService){ 
this.allNews(); 
this.pageno = 1; 
} 

allNews() { 
    return this.searchService.getAllNews(this.pageno).subscribe(
     (res) => { 
      let posts = res.data; 
      for (let post of posts) { 
      console.log(post); 
      this.allNewsVar.push(post); 
      } 
     }, 
     (err) => { 
      console.log(err); 
     }, 
     () => console.log('done!') 
    ); 
    } 


doInfinite(infiniteScroll) { 
    console.log('done!'); 
    let nextPageUrl = this.pageno++; 
    console.log("next page:"+nextPageUrl); 
    this.searchService.getAllNews(nextPageUrl).subscribe(
      data => { 
      let posts=data.data; 
      for(let post of posts){ 
      console.log(post); 
      this.allNewsVar.push(post); 
      } 
     }, 
      err => { 
      console.log(err); 
     }, 
     () => console.log('Next Page Loading completed') 
    ); 
    infiniteScroll.complete(); 
    } 

所有新闻服务TS文件部分

getAllNews(nextPageUrl){ 
    this.allNewsResponse = this.http.get(this.allNewsUrl+'?page='+nextPageUrl); 
     return this.allNewsResponse; 
    } 

希望这帮助是的。