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

【问题标题】：Virtual Scroll For angular 4 Variable/Dynamic height images用于角度 4 可变/动态高度图像的虚拟滚动
【发布时间】：2019-04-08 16:23:23
【问题描述】：

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

【问题讨论】：

您的目标只是根据滚动位置在 DOM 上删除/添加您的项目？您是否需要跟踪谁拥有当前的“焦点”？我在当前项目中解决了同样的问题，管理异步图像下载是一场噩梦。
是的，我不需要跟踪当前焦点。
好的，我有空的时候会为你准备代码示例:)
@Rakesh 我可以请你看看ngx-ui-scroll吗？我们刚刚发布了第一个版本（昨天）。该库的先前（AngularJS）版本涵盖了不同的项目高度用例。新版本尚未经过不同高度的测试，但很有可能它确实适用于最简单的情况。无论如何，我们绝对希望这个功能在 ngx-ui-scroll 中，如果你可以尝试一下，也许会在存储库中绘制一个问题......
@dhilt 我试过ngx-ui-scroll，但在集成时出错。我记录了一个问题。

标签： angular angular-material2 virtualscroll

【解决方案1】：

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

【讨论】：

@davidvalentino 您是否尝试将无限模式设置为真？当滚动回已经渲染的元素dhilt.github.io/ngx-ui-scroll/#/#infinite-mode 时，它变得更加平滑
使用无限模式时DOM元素不断增加

【解决方案2】：

如果您不想使用第三方库并使用 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 px 的标题并填充屏幕）和 itemSize="10" （或任何其他小数字，它就可以工作） .

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

请记住，某些功能不适用于此功能，例如滚动到某个项目或无限滚动（因为可见项目的数量是由 itemSize 计算的，并且您无法准确知道它，除非您开始测量每个项目并计算这对我个人来说太老套了）

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

【讨论】：