代码之家 › 专栏 › 技术社区 › Rakesh

用于角度4可变/动态高度图像的虚拟滚动

virtualscroll angular-material2 angular

5

Rakesh · 技术社区 · 7 年前

我正在实现一个类似推特的提要屏幕,其中包含图像和文本。我使用的是角度4。目前我正在使用 Virtual Scroll 当用户滚动100个项目时,可以提高性能。我的问题是,在我的列表中,所有项目的大小都是可变的,而此库不完全支持动态高度。比如需要一些最小固定高度。这会导致移动设备和某些浏览器中出现闪烁。如果可能的话,我想用Angular实现React Js虚拟滚动。有谁能给我建议一些解决方案,让我的订阅源列表变得顺畅吗。

2 回复 | 直到 7 年前

1

4

Rakesh 7 年前

像 ngx-ui-scroll 支持所有必需的功能,如可变高度内容。如果你真的想克服这个问题,我建议大家都使用这个。

2

3

Phil 6 年前

如果不想使用第三方库并使用Google材质,请执行以下操作(对于Angular 7.2):

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';

并将两者都放入模块的导入中。设置为on <cdk-virtual-scroll-viewport> CSS高度(可能是 calc(100vh - 50px) 例如,如果要排除50 px的标题并填充屏幕)和itemSize=“10”(或任何其他小数字,它只起作用)。

在迭代项集上 [style.height]="'auto'" 。

请记住,有些功能对此不起作用,例如滚动到一个项目或无限滚动(因为可见项目的数量是按项目大小计算的,你不知道它的精确程度,除非你开始测量每个项目并计算平均值,这对我个人来说太粗糙了)

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