vue-virtual-scroll

前言

在前端项目中经常需要一次渲染大量数据，然而大量数据就会生成大量dom，这样会造成浏览器卡顿，严重时还会卡死。这时候就需要用到虚拟列表了！！！

虚拟列表的原理很简单，就是只渲染可是区域内的元素，当你滚动页面时再去加载数据及dom。 为了用户体验一般会给列表留有一定的buffer（及上下多加载几个项目）当你滚动时就不会出现白屏现象了！ 接下来给大家介绍一个非常好用的虚拟列表库----vue-virtual-scroller

1.RecycleScroller组件使用方法：

Install all the components:

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

组件中使用：

<template>
  <RecycleScroller
    class="scroller"
    :items="list"//遍历的数组
    :item-size="32"//每个元素的高度
    :buffer="10" //缓存数量
    key-field="id"//唯一的key值
  >
    <template v-slot="{ item,index }">//单个元素及index
        <div>{{item.name+index}}</div>
    </template>
  </RecycleScroller>
</template>

<script>
export default {
  props: {
    list: Array,
  },
}
</script>
.scroller {
  height: 100%;
}

注意事项：

1. RecycleScroller容器必须添加高度否则会有样式问题
2. item-size必须添加
3. 这个组件当单个元素大小不确定时会出现样式的遮挡问题

2.DynamicScroller组件使用方法：

  <DynamicScroller
    :items="items"
    :min-item-size="54"
    class="scroller"
  >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[
          item.message,//大小不固定的数据
        ]"
        :data-index="index"
      >
        <div class="avatar">
          <img
            :src="item.avatar"
            :key="item.avatar"
            alt="avatar"
            class="image"
          >
        </div>
        <div class="text">{{ item.message }}</div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

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

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

注意事项：

1. DynamicScroller容器必须添加高度否则会有样式问题
2. item-size必须添加
3. DynamicScroller组件与RecycleScroller组件的区别在于单个元素的大小可以不确定（动态高度）

总结：

当您事先不知道单个元素的大小时可以选择DynamicScroller组件，他会自动计算单个元素大小 本人菜鸡，如有错误，请大佬们指正