我正在实现一个包含图像和文本的提要屏幕,例如 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 回答