首先是一些问题
-
复杂性:实现虚拟列表需要进行更多的编程工作和逻辑处理。开发人员需要处理滚动和可见区域变化时的数据加载、渲染和更新等任务。
-
难以处理动态列表:对于动态列表,即经常发生插入、删除或顺序变动的列表,虚拟列表可能更加复杂。因为它需要在可见区域发生变化时重新计算并更新列表项的位置。
-
对于列表中列表项的高度不固定的情况需要一定的处理逻辑。
-
随机访问开销:虚拟列表适用于大型列表的渲染和滚动,但如果用户需要随机访问列表中的项,而不仅限于顺序访问,虚拟列表就无法提供性能优势了。因为它需要在用户访问不可见的列表项时进行加载和渲染。
-
预估和调优成本:正确实现虚拟列表需要合理地预估每个列表项的高度或大小,以便正确地计算和管理可见区域。这可能需要进行一些调试和优化,以确保虚拟列表的性能和可靠性。
需要注意的是,虚拟列表并非适用于所有情况,应根据具体需求和应用场景来评估其使用的适当性。有时,对于较小的列表或对性能要求不高的应用,使用虚拟列表可能并不必要。
解决思路
1. 对于经常发生插入、删除或顺序变动的列表,列表总数发生变化时,执行一些对应处理函数
2. 列表项的高度不固定的情况需要在dom初次渲染和更新的时候缓存数据里面更新列表项具体的位置和高度
3. 对于随机跳转到具体数据位置,可以先查找有没有该dom元素,没有就通过下标来滚到到估算的位置上,然后再判断有无,没有就一直往下滚到一个高度,直到找到)
4. 渲染区域高度一般需要的是固定值,如果页面发生变化或者页面窗口出现调节可以通过自定义的方法和resize来重新计算高度并更新
虚拟列表原理可以参考虚拟列表原理剖析-CSDN博客
对应代码参考:如何实现一个高度自适应的虚拟列表 - 掘金