typescript - Ionic 5 虚拟滚动创建空白空间而不是新项目

Question

我正在尝试使用 ion-virtual-scroll 渲染列表，但是当我动态更新列表时，它不会显示新项目并创建空白空间，但是当我检查滚动时，该项目出现在列表中CSS 属性“transform:translate3d(0px, -9999px, 0px);”

   <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
    <ion-virtual-scroll [items]="listedLoadedPlaces"

    >
      <ion-item

        [routerLink]="place.id"
        detail
        *virtualItem="let place"
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{place.title}}</h2>
          <p>{{place.description}}</p>
        </ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ion-col>

Answer 1

遇到此问题或类似问题的任何人都可能需要尝试运行 checkRange 或 checkEnd 这些由 IonVirtualScroll 提供的 api 标记最后一项或指定的项目为脏，以触发该项目的全新渲染。

在 ionic 角度项目中，它看起来像这样。

template: <ion-virtual-scroll #listedLoadedPlacesScroll [items]="listedLoadedPlaces">
           <ion-item........

component:
  @ViewChild('#listedLoadedPlacesScroll', null) listedLoadedPlacesScroll: IonVirtualScroll;

.....
functionToUpdateList(): void {
   this.listedLoadedPlaces.push(newItem);
   this.listedLoadedPlacesScroll.checkEnd();
}

如果您只需要更新不是源数据数组中最后一项的特定项目，您将使用 checkRange

template: <ion-item
        [routerLink]="place.id"
        detail
        *virtualItem="let place; let index = index;"
        (click)="doSomething(place, index)"
      >

component:
    doSomething(place, index): void {
      ..do something to place...
      this.listedLoadedPlacesScroll.checkRange(index, 1);
}

在 checkRange 中，您指示 IonVirtualScroll 元素将索引处的项目标记为脏，第二个参数是 len 表示 length，它是要标记为脏的项目(包括当前项目)的数量。 SO len = 3 表示这些位置的索引、索引 + 1、索引 + 2 项将被标记为脏并进行新渲染。

我遇到一个问题，更改 View 中的项目需要更改 View 外的项目，解决方案是将所有项目标记为脏 checkRange(0, items.length)，以优雅的方式也许，但现在它可以按预期工作。