Vue3 + vue-virtual-scroller虚拟列表实现加载长列表

一、安装

github地址：https://vue-virtual-scroller-demo.netlify.app/chat
demo运行地址：https://vue-virtual-scroller-demo.netlify.app/chat

npm安装：

npm install --save vue-virtual-scroller@next

yarn安装：

yarn add vue-virtual-scroller@next

在项目中引入：

main.ts文件中引入
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VirtualScroller from 'vue-virtual-scroller'app.use(VirtualScroller);

二、使用

1、基础使用，已经限定元素的高度
:items=“List”：List为要显示的数组数据
:min-item-size=“60”：一行元素的高度为60px
key-field=“roomId”：key为roomId，不设置会报错
h-full：设置容器的高度，可以为固定高度、计算高度或者flex-1的高度，一定要设置，不然会报超出限制或者内容只加载部分，还会造成dom全部加载出来而不是只加载可视区域

<DynamicScroller h-full :items="List" :min-item-size="60" key-field="roomId"><template v-slot="{ item, active }"><div class="roomNameCss">{{ item.roomName }}</div></template></DynamicScroller>

2、不限制原生高度
不限制高度需要DynamicScroller 和DynamicScrollerItem 配合使用

<DynamicScroller h-full :items="dataList" :min-item-size="32"  key-field="msgId" ref="liveMsg"><template v-slot="{ item, active }"><DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.name, item.content]"><div>{{item.name}}</div><div>{{item.content}}</div></DynamicScrollerItem></template></DynamicScroller>

3、使滚动条滚动到最底部
（liveMsg绑定参考【2、不限制原生高度】）

const liveMsg = ref()
liveMsg.value.scrollToBottom();

注意，如果虚拟列表的数据是动态变化的，在列表数据改变赋新值前需要清空列表数据再赋值，不然数据改变几次后滚动条就会滚不动了。
比如dataList.value = []，后再去赋值dataList.value = result，参考下面处理方法，虚拟列表外层div可以包裹一层加载样式（ v-loading=“loading”）

//getDataRequest请求接口方法
const loading = ref(false)
const getData = async () => {loading.value = true;dataList.value  = [];const result = await getDataRequest().finally(() => {loading.value = false});dataList.value  = result;
}