当数据集被更改时，离子虚拟滚动列表元素总是闪烁

Question

我正在使用 Ionic 虚拟滚动和无限滚动来显示我的项目列表，它工作正常，但我注意到每当它从服务器获取数据时，列表元素都会闪烁片刻，我想这是因为虚拟滚动正在重新渲染 html 元素。如果我只是使用ngFor来显示项目列表，则不会有任何闪烁，但它无法正确显示太多项目，例如超过200个。这有点烦人，我想删除虚拟滚动上的闪烁，我该怎么做？

<div style="height: 100%">
<ion-list [virtualScroll]="list | pesStatus: statusFilter" [approxItemHeight]="'108px'" [virtualTrackBy]="trackBy">
<ion-item *virtualItem="let item">
<ion-row class="pes-info-title">
<ion-col class="pull-side">
<div>{{item.TrackingNumber}}</div>
<div>{{item.BusinessPartnerName}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="pull-side">
<div>
<svg-icon width="16px" height="16px" [id]="'svg-icon-status' + item.PesStatusId"></svg-icon>
<div class="pes-info-small">{{item.StatusName}}</div>
</div>
<div class="pes-info-small">{{item.PesCode}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="pull-side">
<div>
<svg-icon width="16px" height="16px" [id]="'svg-icon-status' + item.PesStatusId"></svg-icon>
<div class="pes-info-small">{{item.DateDelivered}}</div>
</div>

<div class="pes-info-small">{{item.ProjectName}}</div>
</ion-col>
</ion-row>

</ion-item>
</ion-list>
<ion-infinite-scroll #infiniteScroll
(ionInfinite)="$event.waitFor(doInfinite($event))">
<ion-infinite-scroll-content loadingText="Loading..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>

Answer 1

这是ionic中虚拟滚动的已知问题。 见 https://github.com/ionic-team/ionic/issues/11788

您应该已分享如何从服务器追加数据，以及有关筛选器的更多详细信息。

此问题主要与将新数据推送到数组中的方式有关。

不要使用连接(或扩展运算符(，因为它将替换当前数组并导致虚拟滚动完全刷新。我通过迭代行并将它们逐个推送到数组来解决此问题。

// WRONG WAY will CAUSE BLINKS AND JUMPS
gotData(_data:any[]){
this.list = this.list.concat(_data); // will cause the issue.
}

// CORRECT WAY TO SOLVE THE BLINKING ISSUE
gotData(_data:any[]){
let len:number = _data.length;
for(let i:number = 0; i< len; i++)
this.list.push(_data[i]); // this will work without blinks or jumps
}

通过应用此修复程序，我已经解决了无限滚动器和虚拟列表的问题。