Ionic App中的虚拟虚拟滚动

时间:2017-10-26 18:07:00

标签: angular ionic-framework mobile virtualscroll

出于性能原因,我试图在Ionic应用程序中模仿虚拟滚动(表格单元格回收)。在我的应用程序中,我有一些屏幕,其中包含数百个带图像的项目。因此,我无法同时显示所有内容。 Ionic中的virtualScroll组件应该可以解决问题,但遗憾的是,目前还没有允许它使用动态管道的错误。

我想建立自己的虚拟滚动技术,但我不认为自己创建了自己的合法虚拟滚动。我的问题是:我可以通过display:none来模拟虚拟滚动,以及不在视口中的项目上父组件的设置高度吗?这会实现一些全面的虚拟卷轴可以实现的性能改进吗?

1 个答案:

答案 0 :(得分:1)

回答你的问题:

通过设置display:none,您将获得图形渲染性能优势,因为它将从渲染树中删除这些单元格。这可能会导致滚动更平滑。

但是,您仍然将所有表格单元格分配到DOM上,而不是真正的虚拟滚动,它只分配尽可能多的单元格。如果您决定进行自定义实现,特别是如果您有大型数据集,我会考虑这一点。在内存和CPU方面,DOM上的10个可重用单元总是比10,000更好,9,990设置为“display:'none'”。

我想说你最好的选择是权衡你的选择并找出使用动态管道的解决方法(这可能比试图实现你自己的虚拟滚动更容易),这样你就可以使用内置的虚拟滚动。 / p>