Ionic中ngIf嵌套ngFor加载数据后页面自动跳顶问题

问题分析 #

在餐饮订单管理页面中，通过ion-infinite-scroll实现后端分页加载订单，切换待处理/已完成订单时用*ngIf包裹*ngFor渲染列表。触发加载更多后页面自动跳回顶部，替换*ngIf为[style.display]也无法解决。核心原因是数组变更时*ngFor默认的跟踪机制导致DOM不必要重绘，滚动位置丢失，同时ion-infinite-scroll的位置与动态切换的列表容器存在冲突。

解决方案 #

1. 给*ngFor添加trackBy优化渲染 #

通过trackBy让Angular仅渲染新增的订单元素，避免整个列表重绘：

修改后的HTML代码

<ng-content>
  <!-- 切换按钮 -->
  <button (click)="pastOrDelivered(false)">
    Upcoming Orders
  </button>

  <button (click)="pastOrDelivered(true)">
    Delivered Orders
  </button>

  <!-- 待处理订单列表 -->
  <div *ngIf="showUpcoming">
    <div *ngFor="let order of upcoming; trackBy: trackByOrderId; let i=index;">
      <div class="item-card item-card-bottom">
        <h4>upcoming data</h4>
      </div>
    </div>
  </div>

  <!-- 已完成订单列表 -->
  <div *ngIf="showDelivered">
    <div *ngFor="let order of deliveredOrders; trackBy: trackByOrderId; let i=index;">
      <div class="item-card item-card-bottom">
        <h4>delivered data</h4>
      </div>
    </div>
  </div>

  <ion-infinite-scroll threshold="30%" position="bottom" [disabled]="!shouldGetOrders" (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner=""></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ng-content>

在TypeScript中添加trackByOrderId方法

class OrderHistoryPage {
  upcoming: any = [];
  orders: any = [];
  deliveredOrders: any[] = [];
  showDelivered: boolean = false; 
  showUpcoming: boolean = true;
  offset = 0;
  records = 10;
  shouldGetOrders = true;

  async ionViewDidEnter() {
    this.pastOrDelivered(true);
    this.getOrders();
  }

  // 新增trackBy方法，用订单唯一标识跟踪列表项
  trackByOrderId(index: number, order: any): string {
    return order.id; // 替换为你订单数据中的唯一ID字段
  }

  async getOrders() {
    this.userAPI.getOrderHistory(this.offset, this.records)
    .subscribe((orders: any) => {
      if(orders.total >= this.records) {
        this.offset += this.records;
      } else {
        this.shouldGetOrders = false;
      }
      
      this.orders = orders.orders;

      this.orders.forEach( order => {
        if (order.deliveryStatus != 'DELIVERED' && order.deliveryStatus != 'CANCELLED') {
          this.upcoming.push(order)
        } else if (order.deliveryStatus == 'DELIVERED' || order.deliveryStatus == 'CANCELLED') {
          this.deliveredOrders.push(order)
        }
      });
      }, err => {});
  }

  onIonInfinite(ev) {
    if(this.shouldGetOrders === true) {
      this.getOrders();
      setTimeout(() => {
        (ev as InfiniteScrollCustomEvent).target.complete();
      }, 500);
    }
  }

  pastOrDelivered(params) {
    this.showDelivered = params
    this.showUpcoming = !params
  }
}

2. 嵌套ion-infinite-scroll到各列表容器 #

如果上述方法无效，可将滚动加载组件嵌套到每个列表容器内，避免切换列表时滚动容器的DOM结构变化：

<!-- 待处理订单列表 -->
<div *ngIf="showUpcoming">
  <div *ngFor="let order of upcoming; trackBy: trackByOrderId; let i=index;">
    <div class="item-card item-card-bottom">
      <h4>upcoming data</h4>
    </div>
  </div>
  <ion-infinite-scroll threshold="30%" position="bottom" [disabled]="!shouldGetOrders || !showUpcoming" (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner=""></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>

<!-- 已完成订单列表 -->
<div *ngIf="showDelivered">
  <div *ngFor="let order of deliveredOrders; trackBy: trackByOrderId; let i=index;">
    <div class="item-card item-card-bottom">
      <h4>delivered data</h4>
    </div>
  </div>
  <ion-infinite-scroll threshold="30%" position="bottom" [disabled]="!shouldGetOrders || !showDelivered" (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner=""></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>

3. 手动保存/恢复滚动位置 #

若前两种方法都无效，可在加载数据前后手动控制滚动位置：

onIonInfinite(ev) {
  if(this.shouldGetOrders === true) {
    // 保存当前滚动位置
    const scrollContainer = document.querySelector('ion-content')?.shadowRoot?.querySelector('.inner-scroll');
    const scrollTop = scrollContainer?.scrollTop || 0;
    
    this.getOrders();
    setTimeout(() => {
      (ev as InfiniteScrollCustomEvent).target.complete();
      // 恢复滚动位置
      if(scrollContainer) scrollContainer.scrollTop = scrollTop;
    }, 500);
  }
}

关键说明 #

• trackBy是最优解决方案，通过唯一标识避免列表整体重绘，从根源解决滚动位置丢失问题；
• 嵌套滚动加载组件需通过[disabled]确保仅当前显示的列表触发加载；
• 手动恢复滚动位置为兜底方案，仅在其他方法无效时使用。

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