如何在离子 2 中进行分页

Question

我正在编写的应用程序有一个包含数千个项目的大量列表，每个项目都有一个图像来为这个数据集创建一个寻呼机，但我不确定如何做到这一点。我正在尝试在离子 2 中实现这一点。如果我要滚动我的项目，它必须将数据发送到后端，例如 page=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;
    }

希望这对任何人有所帮助。