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

【问题标题】：Ionic virtual scroll list elements always blink when data set being changed更改数据集时，离子虚拟滚动列表元素总是闪烁
【发布时间】：2017-11-16 18:54:19
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案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
}

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

【讨论】：