技术不局限于框架,相同的原理只是实现方式略有不同。
前置
1. 什么是虚拟列表?
首先,虚拟列表只是一个概念,本人对虚拟列表这个表述不置可否。
虚拟列表是对于列表形态数据展示的一种按需渲染,是对长列表渲染的一种优化。
虚拟列表不会一次性完整地渲染长列表,而是按需显示的一种方案,以提高无限滚动的性能。
2. 虚拟列表的实现原理?
根据容器元素的高度 clientHeight 以及列表项元素的高度 offsetHeight 来显示长列表数据中的某一个部分,而不是去完整地渲染整个长列表。
实现一个虚拟列表需要:
得知容器元素的高度 clientHeight
得知列表项元素的高度 offsetHeight
计算可视区域应该渲染的列表项的个数 count = clientHeight / offsetHeight
计算可视区域数据渲染的起始位置 start
计算可视区域数据渲染的结束位置 end
对完整长列表数据进行截断 sliceList = dataList.slice(start, e