Vue3 实现列表虚拟滚动

前言

近期在做一个网页播放器项目中，用到很多需要展示歌单的列表

一个歌单动辄千百首歌曲，页面中的元素太多导致热重载的时候 chrome 直接崩了

于是无限滚动列表提上日程

写的有点乱，也是第一次用 typescript 写项目，先记录一下

完成效果

gif_001.gif

思路和需要解决的问题

与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据

要做到这些我需要知道：

• 一行的高度
• 屏幕范围内能显示的行数
• 列表在页面中距离网页顶部的位置
• 滚动条高度

假设满屏能容纳 10 条数据，需要加载的数据是一个数组listData，只需要裁剪数据范围listData.slice(0, 10)

随着滚动条向下，将滚动条高度/一行的高度可以计算出当前行数

而要模拟滚动条高度就要在页面挂载时就手动设置页面的高度一行高度*listData.length

最后也是最关键的是保持列表一直保持在当前位置上，手动设置列表容器padding-top等于当前滚动条高度

有一个仍未解决的问题，就是每次来回滚动歌曲封面都要重新请求

vue3+setup 写的组件

使用组件

链接

项目地址

Vue.js 一个超长列表无限滚动加载的解决方案 [掘金]