时间戳

首页 > 解决方案 > 如何解决 ion-infinite-scroll ionic 4 中的重复页面

ionic4 - 如何解决 ion-infinite-scroll ionic 4 中的重复页面

问题描述

我正在使用 ionic 4，并且正在使用 ion-infinite-scroll 进行分页。我的问题是我总是遇到重复页面问题。我能知道如何解决这个重复的问题吗？这是我在 home.page.ts 中的代码：

doInfinite(event) {
    this.userService.getData().then(res => {
      event.target.complete();
    });
  }

  loadData(event) {
    console.log('Load more data');

    this.userService.getData().then(res => {
      event.target.complete();
    });
  }

这是 home.html

<ion-infinite-scroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="loading ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

标签： ionic4

解决方案

这取决于你的userService.getData()样子。

看起来您并没有告诉它从偏移量开始。

每次下拉数据时，都应该将该列表数据分配给一些本地页面变量，比如dataList.

然后this.dataList.length用作下一个数据请求的起始索引。

所以一些关于这可能如何工作的伪代码是：

let dataFeed = [];
let startAtRecord = 0;

constructor() {
  this.userService.getData(startAtRecord).then(res => {
    this.dataFeed = res;
    this.startAtRecord = this.dataService.length;
  });
}

loadData(event) {
  // ask for a batch of records, starting at `startAtRecord`
  this.userService.getData(startAtRecord).then(res => {
    // add the new res data to the existing dataFeed
    this.dataFeed = [...this.dataFeed, ...res];
    // keep track of the number of records loaded
    this.startAtRecord = this.dataService.length;
    event.target.complete();
  });
}

你明白我在说什么吗？数据服务必须加载下一页数据，这样您就不会得到相同的数据，因此它需要跟踪它从哪里开始列表。

推荐阅读