在日常代码开发过程中，总会遇到大数据量的问题，当我们需要加载显示几千上万的数据的时候，如果我们是一次性渲染，那肯定就会出现严重的卡顿现象，这对用户体验是非常差的，也会让我们的项目，可用性大大降低，为此我们可以使用虚拟列表这个解决方案，只显示我们可视区域内可展示的数据量，这样就大大降低了页面卡顿的概率。
定高虚拟列表就是虚拟列表的每一行的高度都是固定的，所以做起来也比较方便，一个可视的容器，里面包括这一个用于撑开让可视区域出现滚动条的素，加列表素，通过滚动的距离除于每一行的高，得到开始坐标 startIndex, 通过开始坐标加上 可是容器的高度除于每一行的高得到结束下表 endIndex, 然后可视区域展示的数据 就通过startIndex 与 endIndex 去截取，词不达意，直接上代码
由于定高虚拟列表比较简单就直接上代码了，代码中也有相应的注释
使用的地方
不定高虚拟列表，就是每一行的高度不确定的，要等可视区域的数据渲染完毕之后，才知道每一项的高度，所以这块会有一个预设的步骤，就是还未在可视区域显示过的素的高同意预设一个值，等素渲染之后，再根据实际渲染的值，更新我们的预设值，从而再计算出startInex 与 endIndex, 进而得到要渲染的数据。
可以看到每一行的高度都是不太一样的，具体怎么实现，可以继续往下看
第一 监听传进来的列表数据
当我们刚开始渲染列表的时候，就会调用refreshShwoList 更新我们展示的内容
第二 刷新列表
这里主要是，计算出，撑开滚动条的素的高度，也就是所有素的高度总和，然后计算出开始与结束下表用于截取可视区域的数据
第三 刷新总高度
这里主要就是计算已经出现过在可视区域的素的高度和（每个素的高度都是实际的高度）与未出现过在可视区域的素的高度和（每个素的高度是预设的）mapObj 就是 用来记录出现过在可视区域的素的偏移量 与 自身高度的对象
第四 计算开始与结束下标
第五 计算开始下标
当我们计算出偏移量大于等于滚动距离的时候，这时候得到的就是可视区域开始素的下标了
第五步 计算结束下标
结束下标，就得通过开始下标的偏移量 + 可视区域的高度去计算了，当找到素的偏移量（offset）大于等于他俩（开始下标的偏移量 、可视区域的高度）的和的时候，那这个下标就是结束下标了
第六 获取每一个素的信息
mapObj 就是保存在可视区域出现过的素的对象， 如果素在可视区域出现过，就直接通过mapObj[index] 返回，如果没有出现过，代表是向下滚动的，这种素就得保存一下，高度时估计高度，同时保存出现在可视区域的最后一个素的下标，当这些预设高度的素渲染那完毕之后，都会触发一下 onChangeSize 事件 用于更新maoObj 中高度及偏移量还不是实际值的数据
第七 onChangeSize函数
第八 子组件
子组件相对简单，主要就是监听素是否在可视区域，是的话就出触发 父组件的 onChangeSize 事件，把素标识 及素高度传过去，进而更新mapObj中的数据，渲染出正确的内容
以上便是所哟内容，作为自己的学习笔记记录，如果恰好能帮到你，那再好不过了，
今天的文章 多级列表是什么意思（多级列表是啥）分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/4757.html