Ionic 3中Virtual VS Infinite scroll有啥区别和用例

Posted 2023-03-13

【中文标题】Ionic 3中Virtual VS Infinite scroll有啥区别和用例

【英文标题】：What are differences and use cases for Virtual VS Infinite scroll in Ionic 3Ionic 3中Virtual VS Infinite scroll有什么区别和用例

【发布时间】：2018-03-25 19:35:33

【问题描述】：

我浏览了 Ionic 3 文档，并试图了解两者之间的区别

https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

和

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

我看到他们使用了不同的组件，虽然他们展示了 InfiniteScroll 的示例，但没有 VirtualScroll 的示例，而且它的设置看起来也比较复杂。

两者之间有什么区别以及何时使用其中一个或另一个可能的用例是什么？

【参考方案1】：

虚拟卷轴

我们只在DOM 中创建足够的元素来显示当前在屏幕上的列表数据，并且我们回收这些DOM 元素以在它们scroll off 屏幕上显示新数据。 这样做是为了在处理长列表时

提高性能

。

示例：

您选择500 记录显示在列表中，但Virtual Scroll 一次只会将其中的percentage 插入DOM，这使得滚动更多fluid .

这张图应该有助于解释这个概念：（由josh 下方的文章提供）

在这里你可以看到example of Virtual Scroll

无限滚动

当您获取一定数量的记录并将它们插入到列表中时，一旦您到达底部，它就会获取下一批并将它们插入到列表中，并且只要您有要获取的项目就重复该操作。李> 这里的Instance Members 比Virtual Scroll 多。这意味着您可以更好地控制该组件。

这是example of Infinite Scroll

参考： Link 1 和 Link 2

【讨论】：

+1 但我仍然想知道什么更好用，我正在使用无限滚动，它在 android 版本上运行良好，但在 ios 上运行速度很慢。甚至离子列表项的加载速度也很慢我正在使用 ionic v3。如果您对此有所了解，请告诉我