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

IONIC 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;
    }

希望这有任何帮助。

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

2 个答案: