前军教程网

今天给大家推荐一个超高性能的Vue大数据滚动列表组件VueVirtualScroller。

vue-virtual-scroller 基于 vue.js 构建的 无卡顿 超平滑 高性能 无限数据滚动列表组件。采用虚拟的滚动列表来优化性能。

如果你的应用存在非常长或者无限滚动的列表，那么采用 窗口化 的技术来优化性能，只需要 渲染少部分区域 的内容，减少重新渲染组件和创建 dom 节点的时间。

安装

$ npm i vue-virtual-scroller -S

引入插件

import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)

Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller)

// or
import Vue from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'

Vue.component('RecycleScroller', RecycleScroller)

使用

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script>
export default {
  props: {
    list: Array,
  },
}
</script>

<style scoped>
.scroller {
  height: 100%;
}
</style>

# demo示例地址
https://akryum.github.io/vue-virtual-scroller/

# 仓库地址
https://github.com/Akryum/vue-virtual-scroller

好了，就分享到这里。如果大家有其他Vue高性能列表组件，欢迎分享交流哈！