vue3实现虚拟滚动Vue-Virtual-Scroller

巴巴博一2025-03-13 16:09

前端优化不可不避的一谈之虚拟滚动：众所周知，滚动是直挺挺的往dom树加东西，如果滚太多滚到万级，渲染过多就会卡顿，而vue-virtual-scroll的灵活懒渲染就能解决这个问题

1，下载与配置

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

2，main.ts中配置导入

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

app.use(VueVirtualScroller)

3，使用如下：

Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档

<template>
    <DynamicScroller
         :style="'overflow':'scroll', 'height':'400px'"
        :items="Arr"
        :min-item-size="100"
        key-field="id"
    >
        <template #default="{ item, index, active }">
            <DynamicScrollerItem
                :item="item"
                :active="active"
                :data-index="index"
            >
                // 这里放置需要循环的代码
            </DynamicScrollerItem>
        </template>
    </DynamicScroller>
</template>