Question

我正在使用虚拟滚动优化我在离子首页中显示的大量项目（630个项目）。

我决定使用虚拟滚动的唯一原因是，在不使用虚拟滚动的情况下加载页面需要大约1秒。我怀疑这是因为，如果没有虚拟滚动，则会创建所有630个单元并在呈现页面之前将它们放置在DOM中，而不仅仅是视口中的单元。由于此页面已多次导航，因此导致用户体验缓慢，差劲。

使用虚拟滚动条很有帮助，因为它可以加快导航速度。但是，当虚拟滚动滚动时，屏幕“变白”，以试图跟上并按需渲染单元。我试图修改缓冲比率属性以预先创建更多的单元格并减少“白化”效应，但这似乎无济于事。

如何解决这种“泛白”效果？有没有一种方法可以限制用户滚动以允许虚拟滚动保持多快的速度？还是有更好的方法来减少我的页面加载时间而无需使用虚拟滚动？

这是我的代码：

home.html

  <div style="height:100%">
    <ion-list [virtualScroll]="displaySongs" [approxItemHeight]="'62px'" [bufferRatio]="7">
      <button *virtualItem="let song; let i = index;"
        ion-item clear class="hymns-list-item"
        [navPush]="songPage" [navParams]=song>
          <h4 class="song-title">
              <span class="song-number">{{song.number}}</span>&nbsp;&nbsp;{{ song.title }}
          </h4>
          <small class="song-genre">{{song.category}}</small>
      </button> 
    </ion-list>
  </div>

离子虚拟滚动：快速滚动时屏幕变白

0 个答案: