Ionic 3中Virtual VS Infinite滚动的区别和用例是什么 [英] What are differences and use cases for Virtual VS Infinite scroll in Ionic 3

问题描述

我已经阅读了Ionic 3文档，并且试图了解两者之间的区别

I've gone through Ionic 3 docs and I was trying to understand the difference between

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

和

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

我看到他们使用了不同的组件，虽然它们显示了 InfiniteScroll 的示例，但是没有 VirtualScroll 的示例，并且它的设置也比较棘手.

I see they use different components and while they show an example of InfiniteScroll there is no example of VirtualScroll and it's set up also looks trickier.

两者之间有什么区别，以及何时使用其中一种可能的用例?

推荐答案

虚拟滚动

• 我们仅在DOM中创建足够的元素来显示当前在屏幕上的列表数据，并且我们回收这些DOM元素以在屏幕上scroll off时显示新数据.
• 这样做是为了在处理长列表时提高性能.
• 示例:您选择要在列表中显示的500记录，但是Virtual Scroll只会一次将其中的percentage插入到DOM中，这会使滚动更多fluid.

• We only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off the screen.
• This is done to improve performance when dealing with long lists.
• Example: you select 500 records to be displayed in a list, But Virtual Scroll will only insert a percentage of them into the DOM at a time which makes scrolling more fluid.

此图应有助于解释该概念:(由下面的josh文章提供)

This diagram should help explain the concept: (by courtesy of josh article below)

在这里您可以看到 Virtual Scroll示例

Here you can see the example of Virtual Scroll

无限滚动

• 当您获取一定数量的记录并将其插入列表中时，到达底部时，它将获取下一批并将其插入列表中，并在需要提取内容时重复该操作.
li>
• 这里的Instance Members比Virtual Scroll多.这意味着您可以更好地控制此组件.

• When you fetch a set number of records and insert them into a list, once you reach the bottom it'll fetch the next batch and insert them into the list and repeat that as long as you have items to fetch.
• Here you have more Instance Members than the Virtual Scroll. That means you have more control of this component.

这是无限滚动的 示例

Here is an example of Infinite Scroll

引用: 链接1 和 链接2

这篇关于Ionic 3中Virtual VS Infinite滚动的区别和用例是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！