Question

在这里，首先您可以在不进行虚拟滚动的情况下检查应用程序的当前状态：

滚动非常顺畅，但是正如您所看到的那样，来回搜索和导航有点慢，因为要重新加载DOM。它的搜索逻辑并不是很慢，因为我只是使用一个简单的管道来仅根据Pokemon名称和ID过滤掉Pokemon列表。我进行了测试，发现罪魁祸首是DOM中没有元素的疯狂。（每个神奇宝贝物品中都有嵌套的Divs）

没有虚拟滚动的口袋妖怪列表组件。

<div class="row justify-content-center">
   <app-pokemon-item *ngFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;"
                      [pokemon]="pokemon"></app-pokemon-item>
</div>

所以现在我正在尝试实现虚拟滚动以提高性能，但这会发生：

列表在滚动时会关闭很多。（感觉不像正常的滚动）。
宠物小精灵图像受到干扰（随机播放/随机播放）。
在向上和向下滚动时，单个口袋妖怪更改的图像都不是静态的。
我还要保留以前的Grid外观。

具有虚拟滚动功能的修改后的Pokemon列表组件。

<cdk-virtual-scroll-viewport style="height: 90vh" itemSize="100">
  <ng-container *cdkVirtualFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;">
    <app-pokemon-item [pokemon]="pokemon"></app-pokemon-item>
  </ng-container>
</cdk-virtual-scroll-viewport>

The Problem

Answer 1

我遇到了与您相同的问题，并通过添加 templateCacheSize: 0 解决了该问题。

这是回答here

如何在Angular 9 App中修复CDK虚拟滚动。 [PokeDex应用]

1 个答案: