Vue3 实现列表虚拟滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 实现列表虚拟滚动相关的知识，希望对你有一定的参考价值。
参考技术A 近期在做一个网页播放器项目中，用到很多需要展示歌单的列表一个歌单动辄千百首歌曲，页面中的元素太多导致热重载的时候 chrome 直接崩了 😢
于是无限滚动列表提上日程
写的有点乱，也是第一次用 typescript 写项目，先记录一下
与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据
要做到这些我需要知道：
假设满屏能容纳 10 条数据，需要加载的数据是一个数组 listData ，只需要裁剪数据范围 listData.slice(0, 10)
随着滚动条向下，将 滚动条高度/一行的高度 可以计算出当前行数
而要模拟滚动条高度就要在页面挂载时就手动设置页面的高度 一行高度*listData.length
最后也是最关键的是保持列表一直保持在当前位置上，手动设置列表容器 padding-top 等于 当前滚动条高度
有一个仍未解决的问题，就是每次来回滚动歌曲封面都要重新请求 😮
项目地址
Vue.js 一个超长列表无限滚动加载的解决方案 [掘金]
以上是关于Vue3 实现列表虚拟滚动的主要内容，如果未能解决你的问题，请参考以下文章