我正在实现一个包含图像和文本的提要屏幕，例如 twitter。我正在使用 angular 4。目前，当用户像 100 个项目一样深度滚动时，我正在使用Virtual Scroll来提高性能。我的问题是在我的列表中所有项目的大小都是可变的，并且这个库不完全支持动态高度。就像需要一些最小固定高度一样。这会导致移动设备和某些浏览器闪烁。如果可能的话，我想用 Angular 实现 React Js Virtual scroll。任何人都可以建议我任何解决方案，以便我的提要列表变得顺畅。
问问题
12425 次
2 回答
4
由于ngx-ui-scroll支持所有必需的功能，例如可变高度内容。如果您真的想克服这个问题，我建议所有人都使用它。
于 2018-03-29T06:38:48.493 回答
3
如果您不想使用第三方库并使用 Google Material，请执行以下操作（对于 Angular 7.2）：
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
并将两者都放入模块的导入中。通过 CSS设置<cdk-virtual-scroll-viewport>高度（calc(100vh - 50px)例如，如果您想排除 50 像素的标题并填充屏幕）和 itemSize="10" （或任何其他小数字，它就可以工作）。
并在迭代项集上[style.height]="'auto'"。
请记住，某些功能不适用于此功能，例如滚动到某个项目或无限滚动（因为可见项目的数量是由 itemSize 计算的，而您并不精确地知道它，除非您开始测量每个项目并计算平均值对我个人来说太hacky了）
于 2019-04-07T20:26:46.290 回答