angular 4 Variable/Dynamic 高度图像的虚拟滚动
Virtual Scroll For angular 4 Variable/Dynamic height images
我正在实现一个像 Twitter 这样包含图像和文本的提要屏幕。我正在使用 angular 4。目前我正在使用 Virtual Scroll 来提高用户滚动到 100 个项目时的性能。我的问题是在我的列表中，所有项目的大小都是可变的，而且这个库不完全支持动态高度。就像需要一些最小的固定高度。这会导致移动设备和某些浏览器出现闪烁。如果可能的话，我想用 Angular 实现 React Js 虚拟滚动。任何人都可以建议我任何解决方案，以便我的提要列表变得流畅。
因为 ngx-ui-scroll 支持所有必需的功能，例如可变高度内容。如果你真的想克服这个问题，我建议大家使用这个。
如果您不想使用 third-party 库并使用 Google Material，请执行此操作（对于 Angular 7.2）：
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
并将两者都放入模块的导入中。在 <cdk-virtual-scroll-viewport> 上设置 CSS 的高度（例如，如果您想排除 50 像素的 header 并填满屏幕，则可能是 calc(100vh - 50px)）和 itemSize="10 "（或任何其他小数字，它只是有效）。
并且在迭代项集上 [style.height]="'auto'"。
请记住，某些功能不适用于此，例如滚动到某个项目或无限滚动（因为可见项目的数量是由 itemSize 计算的，而您并不能准确知道它，除非您开始测量每个项目并计算平均值，这对我个人来说太老套了）
我正在实现一个像 Twitter 这样包含图像和文本的提要屏幕。我正在使用 angular 4。目前我正在使用 Virtual Scroll 来提高用户滚动到 100 个项目时的性能。我的问题是在我的列表中，所有项目的大小都是可变的，而且这个库不完全支持动态高度。就像需要一些最小的固定高度。这会导致移动设备和某些浏览器出现闪烁。如果可能的话，我想用 Angular 实现 React Js 虚拟滚动。任何人都可以建议我任何解决方案，以便我的提要列表变得流畅。
因为 ngx-ui-scroll 支持所有必需的功能，例如可变高度内容。如果你真的想克服这个问题，我建议大家使用这个。
如果您不想使用 third-party 库并使用 Google Material，请执行此操作（对于 Angular 7.2）：
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
并将两者都放入模块的导入中。在 <cdk-virtual-scroll-viewport> 上设置 CSS 的高度（例如，如果您想排除 50 像素的 header 并填满屏幕，则可能是 calc(100vh - 50px)）和 itemSize="10 "（或任何其他小数字，它只是有效）。
并且在迭代项集上 [style.height]="'auto'"。
请记住，某些功能不适用于此，例如滚动到某个项目或无限滚动（因为可见项目的数量是由 itemSize 计算的，而您并不能准确知道它，除非您开始测量每个项目并计算平均值，这对我个人来说太老套了）