Ionic3无限滚动数据覆盖问题求助：如何实现数据连续追加

我明白你的问题了——现在每次触发加载更多时，新文章会替换掉之前加载的内容，而不是追加到原有列表后面。这是因为你用了两个独立的数组(posts和more)来存储数据，并且每次加载新数据时只是覆盖了more数组，没有把新数据合并到主列表里。下面是具体的修复方案：

第一步：修改TypeScript代码（HomePage.ts） #

我们只需要一个数组来存储所有文章，移除多余的more变量，在加载新数据时把内容追加到主数组中：

export class HomePage { 
  posts: any = []; // 初始化空数组，用来存储所有文章
  postlen: number = 0; 
  imglink: string = "http://blog.bax/img/"; 

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) { 
    let url = "http://blog.bax/api/blog"; 
    this.http.get(url).map(res => res.json()).subscribe(data => { 
      this.posts = data; // 第一次加载的文章直接赋值给posts
      // 初始化postlen为当前已加载的数量，适配接口返回的实际条数
      this.postlen = data.length;
    }); 
  } 

  openPage(post:any) { 
    this.navCtrl.push('NewsPage', {post: post}); 
  } 

  loadMore(infiniteScroll:any) { 
    setTimeout(() => { 
      let urlmore = "http://blog.bax/api/indexmore/" + this.postlen; 
      console.log(urlmore) 
      this.http.get(urlmore).map(res => res.json()).subscribe(data => { 
        if(data.length > 0){
          // 把新加载的文章追加到posts数组末尾
          this.posts.push(...data);
          // 更新已加载的数量
          this.postlen += data.length;
        } else {
          // 如果没有更多数据，禁用无限滚动，避免无效请求
          infiniteScroll.enable(false);
        }
      }); 
      infiniteScroll.complete(); 
    }, 500); 
  } 
}

关键改动说明： #

• 移除了more变量，只用posts存储所有文章数据
• 第一次加载数据后，初始化postlen为已加载的文章数量（代替固定加20，适配接口返回的实际条数）
• 加载新数据时，用扩展运算符...把新数据追加到posts数组，而不是覆盖
• 增加了空数据判断，如果没有更多内容就禁用无限滚动，避免重复请求

第二步：修改HTML代码（home.html） #

现在只需要循环一个数组即可，移除第二个*ngFor循环：

<ion-list>
  <ion-item *ngFor="let post of posts" (click)="openPage(post)">
    <ion-thumbnail item-start>
      <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
    <h2> {{ post.title }}</h2>
    <p> {{ post.excerpt }}</p>
  </ion-item>

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

关键改动说明： #

• 删除了循环more数组的<ion-item>块，所有文章都通过posts数组循环渲染
• 保持无限滚动组件在列表末尾，正常触发加载逻辑

这样修改后，每次加载更多数据时，新文章就会追加到原有列表的后面，实现连续加载的效果了。

内容的提问来源于stack exchange，提问作者codekiller