5

我正在实现一个包含图像和文本的提要屏幕,例如 twitter。我正在使用 angular 4。目前,当用户像 100 个项目一样深度滚动时,我正在使用Virtual Scroll来提高性能。我的问题是在我的列表中所有项目的大小都是可变的,并且这个库不完全支持动态高度。就像需要一些最小固定高度一样。这会导致移动设备和某些浏览器闪烁。如果可能的话,我想用 Angular 实现 React Js Virtual scroll。任何人都可以建议我任何解决方案,以便我的提要列表变得顺畅。

4

2 回答 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了)

来源:https ://github.com/angular/material2/issues/10113

于 2019-04-07T20:26:46.290 回答