Ionic 3 InfiniteScroll问题求助：新数据加载后替换旧缩略图

Hey there! 看你碰到了Ionic 3 InfiniteScroll的小麻烦——滚动到底部能加载新数据，但旧的缩略图直接被替换了，不是追加显示对吧？我之前做项目也踩过这个坑，大概率是数据更新的方式不对，咱们一步步来解决：

核心原因 #

这种情况几乎都是因为你在获取新数据后，直接把新数组赋值给了原有列表变量（比如this.movieList = newMovies），相当于把旧数据直接覆盖掉了，而不是把新数据追加到现有数组里。

具体解决方案 #

1. 检查页面组件的数组更新逻辑 #

首先确保你在页面组件里维护了一个存储所有加载数据的总数组，然后用追加的方式更新它：

错误写法（直接覆盖）：

// 页面组件.ts
movieList: any[] = [];
currentPage = 1;

loadMore(infiniteScroll) {
  this.currentPage++;
  this.tmdbService.getMovies(this.currentPage).subscribe(newMovies => {
    this.movieList = newMovies; // ❌ 这里直接赋值，旧数据被覆盖！
    infiniteScroll.complete();
  });
}

正确写法（追加数据）：

// 页面组件.ts
movieList: any[] = [];
currentPage = 1;

loadMore(infiniteScroll) {
  this.currentPage++;
  this.tmdbService.getMovies(this.currentPage).subscribe(newMovies => {
    // 方法1：用concat合并新旧数组（返回新数组，不修改原数组）
    this.movieList = this.movieList.concat(newMovies);
    // 方法2：用展开运算符push（直接修改原数组）
    // this.movieList.push(...newMovies);
    
    infiniteScroll.complete();
  }, error => {
    // 别忘了处理错误，及时结束滚动加载
    infiniteScroll.complete();
    console.error('数据加载失败:', error);
  });
}

2. 确认Provider的接口方法返回单页数据 #

你的tmdb-service.ts里的请求方法，要确保是根据页码返回当前页的单独数据，而不是全部数据。比如类似这样的实现：

// tmdb-service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class TmdbService {
  private apiKey = '你的TMDB API密钥';
  private baseUrl = 'https://api.themoviedb.org/3';

  constructor(public http: HttpClient) {}

  getMovies(page: number): Observable<any[]> {
    const url = `${this.baseUrl}/movie/popular?api_key=${this.apiKey}&page=${page}`;
    // 返回当前页的结果数组，而不是整个响应对象
    return this.http.get(url).map(res => res['results']);
  }
}

3. 模板绑定正确的数组 #

确保HTML模板里的*ngFor循环绑定的是存储所有数据的movieList，而不是临时的新数据数组：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let movie of movieList">
      <img [src]="'https://image.tmdb.org/t/p/w200' + movie.poster_path" alt="{{movie.title}}">
      <h2>{{movie.title}}</h2>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content 
      loadingSpinner="bubbles" 
      loadingText="正在加载更多内容...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

额外注意点 #

• 当加载到最后一页（没有更多数据）时，记得调用infiniteScroll.enable(false)来禁用滚动加载，避免重复发起无效请求
• 确保页码currentPage是正确递增的，不要出现页码重置或者重复的情况

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