vue无限滚动优化

安装 npm i vue-virtual-scroller

1. 安装
安装 vue-virtual-scroller

npm i vue-virtual-scroller
1
安装完后 package.js 中会多出

    "vue-virtual-scroller": "^1.0.10"
1
2. vue 中引入 vue-virtual-scroller
main.js 中引入 vue-virtual-scroller 并 use 它

// vue virtual scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入它的 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入它
Vue.use(VueVirtualScroller) // use 它

使用

<recycle-scroller
    class="virtual-list"
    style="height: 400px"
    :item-height="100"
    :items="tableData">
    <template v-slot="{ item, index }">
        <div class="list-item" :key="item.id">
            <p class="mr-2">{{ item.id }}</p>
            <p>{{ item.name }}</p>
        </div>
    </template>
</recycle-scroller>