问题标签 [virtualscroll]

我在我的 ionic 4 + Angular 项目中实现虚拟滚动时遇到问题。

以前，我使用了 ionic 的虚拟滚动（ion-virtual-scroll）实现，它最初工作得很好，但遇到了一个可以说是它不支持我的应用程序所需的 ionic 网格视图的警告。（Ionic 已经在“功能请求”下的回购协议中承认了这一点：https ://github.com/ionic-team/ionic/issues/16632 ）

与此同时，我使用了 ngx-virtual-scroller ( https://github.com/rintoj/ngx-virtual-scroller )，因为它提供了多列支持

但是，我无法在我的项目中使用。

我已经通过 npm (npm install ngx-virtual-scroller --save) 安装了它，并在我的 app.module 中导入了 VirtualScrollerMoudle

app.module.ts

我已经在我的组件视图中将 virtual-scroller 标签包裹在我的元素周围

product-card-view.component.html

但我收到此错误

控制台错误

core.js:9110 错误错误：未捕获（承诺中）：错误：模板解析错误：无法绑定到“项目”，因为它不是“虚拟滚动条”的已知属性。1. 如果“virtual-scroller”是一个 Angular 组件并且它有“items”输入，那么验证它是这个模块的一部分。2. 如果“virtual-scroller”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。3. 允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。

在寻找解决方案后，我遇到了遇到类似问题但使用 Ionic 3（https://github.com/rintoj/ngx-virtual-scroller/issues/85）的其他人，他们的解决方案是将 VirtualScrollMoudle 导入使用它而不是全局应用程序模块的子模块，并表明它可能与对组件使用延迟加载有关。

不幸的是，我尝试这样做无济于事。我尝试仅将 VirtualScrollMoudle 导入 app.module.ts，该组件的父页面模块仅使用 virtual-scoller 并且同时使用两者但遇到了相同的问题。

home.module.ts

我还确保导入语句位于底部，正如我所看到的那样，它设法吸引了很多人（包括过去的我自己）

有什么解决方案还是我错过了一些非常明显的东西？

版本：

离子 4 (5.4.4)

角度：8.1.3

使用 ui-scroll 显示很长的文本（以 MB 为单位）的最佳方式是什么？文本以数组的形式提供，但需要像 textarea 一样显示为长文本文档。我正在使用 ui-scroll，因为文本中的每个单词都是可点击的锚标记。

ui-scroll-td 是否将每个单词显示为列并将行显示为行的唯一方法？

更多信息

1. 我有一个包含 > 2000 个元素（单词）的大数组，用户可以动态更改（元素数量和元素本身）。

2. 我需要将这些元素显示为单个文档，其中每个元素（单词）都是一个超链接，单击该超链接会执行某些操作。

3. 我需要它看起来像一个简单的可滚动 div，其中这些单词显示为长自由流动的可点击文本。

4. 我之前使用 $compile 来动态创建 html，但是初始编译时间和元素更改时的编译非常重要（秒），因为我必须每次编译/渲染整个元素列表。

   5. 所以我想到了使用 ui-scroll 来显示哪个虚拟化并只渲染显示的内容。

   6. 但是 ui-scroll 总是在单独的行中显示每个元素，例如一行，这不是我的用例所需的行为。

请注意，上面的每个单词都是一个可点击的锚点。谢谢。

我正在使用 cdk Virtual Scroll 处理 Angular 表。你知道有没有办法设置滚动视口的动态高度？使用标准样式属性一切正常，但我无法使用 ngStyle 设置值。如果有任何帮助，我将不胜感激。

我想对部分项目使用 ngx-virtual-scroller。

我应该在 ngx-virtual-scroller 的虚拟滚动的项目中放入什么？

我需要为一组项目命名。每个项目都属于一个组。

即标题应该在自己的一行中，并且项目高度大于标题的高度。

编辑：

我忘了提到组的数量是动态的，每个组中的项目数量也是动态的。此外，一个组中的项目数可能是一个非常大的数字，所以我不希望滚动的项目将是组，因为如果组很大，我不想加载所有的到 DOM。

我想提出一个理论上的问题。

假设我有一个无限滚动，实现了如下所述的内容：https ://medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58 。它没有什么花哨的，只要说它是一个数据表就足够了，比如 NxN，用户可以像电子表格一样向下和向右滚动，它只会显示当前视图中的数据加上减去一个处理。

现在，我们还假设在该视图中“获取并显示”数据大约需要 10 毫秒，其功能如下：

当单击滚动条中的某个位置或进行“轻微滚动”以呈现必要的数据时，它会立即加载。但是，我们还假设对于每个“未完成的获取事件”，渲染必要的视图数据需要双倍的时间（由于内存、gc 和其他一些事情）。因此，如果我以缓慢的故意方式从左到右滚动，我可能会生成 100 多个滚动事件，这些事件会触发数据的加载——起初明显延迟为零。提取发生在 10 毫秒以下，但很快它开始需要 20 毫秒，然后是 40 毫秒，现在我们有一个明显的延迟，直到加载必要数据的时间超过一秒。此外，我们不能使用去抖动/延迟之类的东西，

我需要考虑哪些因素以及实现此目的的示例算法是什么样的？这是我希望对数据进行的用户交互的示例，假设有一个 10000 x 10000 的电子表格（尽管 Excel 可以一次加载所有数据）- https://gyazo.com/0772f941f43f9d14f884b7afeac9f414。

请教我如何制作虚拟卷轴。我使用 HTML、JS、Vue。我尝试使用vue-virtual-scroll，但是由于很难将其更改为我想要的功能，因此我将制作一个基础部分并应用它。请告诉我如何制作基本的虚拟卷轴。

如何在角度 5 中实现虚拟滚动？我在 Angular 5 项目中尝试了在 Angular 6 中实现虚拟滚动，但这没有用。有没有其他方法可以在角度 5 中实现虚拟滚动？

假设我有一个组件显示这样的数据

数据的值为

现在这个列表挂起这么大的数据集？所以我需要在这个组件中添加虚拟滚动，以便它像https://stackblitz.com/edit/angular-cdk-demo-virtual-scroll?file=package.json中的第一个示例一样运行

我有一个要求，我们需要一次显示大约 24k 条记录，其中有 84 列，因为用户想要过滤整个数据集。

那么我们可以在没有延迟加载的情况下使用带有 ag-grid 的虚拟滚动机制吗？如果可以，请在这里。任何例子都非常欢迎参考。

在我的应用程序的性能问题上，我一直在努力（很长时间），这涉及使用分段按钮进行列表切换。

我正在使用虚拟滚动来提高性能，因为只有 200 个元素的 ngFor 循环非常慢。

在我的模板中：

这给出了这个：

自定义组件“card-game-list”基本上是一个带有离子卡的虚拟卷轴，我可以提供任何需要的代码细节。

我遇到的问题： 从一个列表切换到另一个列表大约需要半秒，当我单击一个分段按钮时，会有短暂的延迟，然后一切都同时发生：显示另一个列表并产生连锁反应发生但以一种滞后的方式。

分析显示了这一点：

触发的动画帧占用了所有处理时间（0.5 秒），我不知道是否应该以这种方式工作。

我尝试过的：

• 将检测策略更改为 OnPush -> 改进了问题但仍然存在
• 我可以在 npm (+ cdk) 上找到的所有虚拟滚动 -> 他们都有自己不可接受的问题 :'(
• 为虚拟滚动（纸牌游戏列表）提供更简单的组件-> 没有改变任何东西

更深入一点：我认为这与我切换列表的方式有关，也就是说

我的自定义组件有问题...

我正在使用 RxJs observable 将新列表添加到组件的旁边，我觉得这不是最好的选择。

所以问题是：

1. 使用这样的 observable 来切换列表似乎合法吗？
2. 有没有办法首先调用波纹动画（立即）然后进行切换工作？
3. 关于如何改善这一点的任何其他想法？

谢谢你的帮助

离子信息

我有一个使用角度材料虚拟滚动渲染的表格。

我获取数据并填充虚拟滚动，然后将 scrollToIndex 设置为 100。第 100 行显示在屏幕上。

这里的问题是有跳跃，最初当滚动加载它加载第一行然后跳转到第 100 行。有没有办法将其默认为第 100 行。这样它就直接出现而不会跳跃。

更深入地了解问题，

这是一个双向滚动，当滚动条到达顶部时，它调用 API 并获取新值并附加到数组顶部，然后到达底部将数据附加到底部。

当数据附加在底部时，逻辑运行良好，但每次将数据附加到顶部时，滚动条都会跳转。

或 https://stackblitz.com/edit/angular-4cwieu?file=src%2Fapp%2Fapp.component.ts

是否可以在没有设置超时的情况下滚动到特定索引？