多级列表是什么意思（多级列表是啥）

大家好，我是讯享网，很高兴认识大家。

在日常代码开发过程中，总会遇到大数据量的问题，当我们需要加载显示几千上万的数据的时候，如果我们是一次性渲染，那肯定就会出现严重的卡顿现象，这对用户体验是非常差的，也会让我们的项目，可用性大大降低，为此我们可以使用虚拟列表这个解决方案，只显示我们可视区域内可展示的数据量，这样就大大降低了页面卡顿的概率。

定高虚拟列表就是虚拟列表的每一行的高度都是固定的，所以做起来也比较方便，一个可视的容器，里面包括这一个用于撑开让可视区域出现滚动条的元素，加列表元素，通过滚动的距离除于每一行的高，得到开始坐标 startIndex, 通过开始坐标加上可是容器的高度除于每一行的高得到结束下表 endIndex, 然后可视区域展示的数据就通过startIndex 与 endIndex 去截取，词不达意，直接上代码

讯享网

由于定高虚拟列表比较简单就直接上代码了，代码中也有相应的注释

使用的地方

讯享网

不定高虚拟列表，就是每一行的高度不确定的，要等可视区域的数据渲染完毕之后，才知道每一项的高度，所以这块会有一个预设的步骤，就是还未在可视区域显示过的元素的高同意预设一个值，等元素渲染之后，再根据实际渲染的值，更新我们的预设值，从而再计算出startInex 与 endIndex, 进而得到要渲染的数据。

可以看到每一行的高度都是不太一样的，具体怎么实现，可以继续往下看

第一监听传进来的列表数据

讯享网

当我们刚开始渲染列表的时候，就会调用refreshShwoList 更新我们展示的内容

第二刷新列表

这里主要是，计算出，撑开滚动条的元素的高度，也就是所有元素的高度总和，然后计算出开始与结束下表用于截取可视区域的数据

第三刷新总高度

讯享网

这里主要就是计算已经出现过在可视区域的元素的高度和（每个元素的高度都是实际的高度）与未出现过在可视区域的元素的高度和（每个元素的高度是预设的）mapObj 就是用来记录出现过在可视区域的元素的偏移量与自身高度的对象

第四计算开始与结束下标

第五计算开始下标

讯享网

当我们计算出偏移量大于等于滚动距离的时候，这时候得到的就是可视区域开始元素的下标了

第五步计算结束下标

结束下标，就得通过开始下标的偏移量 + 可视区域的高度去计算了，当找到元素的偏移量（offset）大于等于他俩（开始下标的偏移量、可视区域的高度）的和的时候，那这个下标就是结束下标了

第六获取每一个元素的信息

讯享网

mapObj 就是保存在可视区域出现过的元素的对象，如果元素在可视区域出现过，就直接通过mapObj[index] 返回，如果没有出现过，代表是向下滚动的，这种元素就得保存一下，高度时估计高度，同时保存出现在可视区域的最后一个元素的下标，当这些预设高度的元素渲染那完毕之后，都会触发一下 onChangeSize 事件用于更新maoObj 中高度及偏移量还不是实际值的数据

第七 onChangeSize函数

第八子组件

讯享网

子组件相对简单，主要就是监听元素是否在可视区域，是的话就出触发父组件的 onChangeSize 事件，把元素标识及元素高度传过去，进而更新mapObj中的数据，渲染出正确的内容

以上便是所哟内容，作为自己的学习笔记记录，如果恰好能帮到你，那再好不过了，

多级列表是什么意思（多级列表是啥）

第一 监听传进来的列表数据

第二 刷新列表

第三 刷新总高度

第四 计算开始与结束下标

第五 计算开始下标

第五步 计算结束下标

第六 获取每一个元素的信息