0

在这里，首先你可以在没有虚拟滚动的情况下检查应用程序的当前状态：

PokeDex - 网络应用程序

此处为网站图片预览

滚动非常流畅，但正如您所见，搜索和来回导航有点慢，因为需要重新加载 DOM。它不是很慢的搜索逻辑，因为我只是使用一个简单的管道来过滤仅基于口袋妖怪名称和 ID 的口袋妖怪列表。我已经测试并发现罪魁祸首是 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>

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

  1. 滚动时列表关闭很多。（感觉不像正常滚动）。
  2. 口袋妖怪图像受到干扰（随机/随机）。
  3. 图像甚至不是静态的，单个口袋妖怪的图像在上下滚动时会发生变化。
  4. 我也想保留以前的网格外观。

修改了带有虚拟滚动的口袋妖怪列表组件。

<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>

问题

4

1 回答 1

0

我和你有同样的问题，并通过添加 templateCacheSize: 0.

这是在这里回答的

于 2020-12-30T18:10:57.420 回答