vue-virtual-scroll-list 的使用

（一）使用背景

注意：本文vue-virtual-scroll-list使用的2.x版本，与1.x版本使用方法不同。若想使用1.x版本，请略过本文。

github：https://github.com/tangbc/vue-virtual-scroll-list

列表内容特别特别多，列表特别特别长，dom渲染必定使页面卡死。

使用vue-virtual-scroll-list，即列表的虚拟滚动。在可视区域渲染少部分列表内容，减少了创建dom节点和重新渲染组件的时间。

（二）实现步骤

1. 安装

npm install vue-virtual-scroll-list --save

2. 引入 + 注册组件

import virtualList from 'vue-virtual-scroll-list';     //引入
components: { "virtual-list": virtualList },          //注册

3. 列表所在组件

<template>
  <div class="log-cotent">
    <virtual-list
      style="height: 100%; overflow-y: auto; padding-right: 16px"
      :data-key="'id'"                    //唯一索引
      :data-sources="items"              //数据
      :data-component="itemComponent"   //每一行的子组件
      :keeps="100"                     //默认渲染100条
    />
  </div>
</template>
<script>
  import virtualList from 'vue-virtual-scroll-list';
  import Item from "./Item";
  export default {
    name: 'CodeLog',
    components: { "virtual-list": virtualList },
    data() {
      return {
        itemComponent: Item,
        items: [],
      }
    },
  }
</script>

4. 创建一个Item组件，用来显示数据源

<template>
    <!-- 显示的数据源 -->
    <div class="virtualList-item">
      <span class="content">{{ source.id }}</span>
      <div>{{ source.title }}</div>
    </div>
</template>

<script>
  export default {
    name: "item-component",
    props: {
      index: { // 每一行的索引
        type: Number
      },
      //source就是items中的每一条数据，items是从接口接到的数据（这里items是一个数组，数组中的每个元素是一个对象，每个对象有id、title两个属性）
      source: {
        type: Object,
        default: () => {}
      },
    },
  };
</script>

（三）扩展：参数

1. data-key：从data-sources每个数据对象中获取唯一键。或每个函数都调用data-source并返回其唯一键。在中，其值必须唯一data-sources，用于标识商品尺寸。
2. data-sources：列表数据，每一行都必须有一个唯一的id(data-key)。
3. data-component：每一行的子组件。
4. keeps：默认30个，默认渲染的个数。
5. extra-props：默认{} data-component组件的额外props通过改属性传入,内部已有source和index两个。
6. estimate-size：默认50，每一行的高度，如果接近平均大小，则滚动条长度看起来会更准确。
7. scroll： 事件。滚动时发出param (event, range)。