Vue插件——vue-virtual-scroll-list 虚拟滚动组件的使用

vue-virtual-scroll-list是vue的一个虚拟滚动组件，通过不渲染可视区域以外的内容，显示虚拟的滚动条来提升页面性能

首先是安装插件

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

页面使用

<div>
   <virtual-list 
     style="height: 360px; overflow-y: auto;" //样式可以通过style写
     class=''  //样式也可以通过class写
     :data-key="'key'" //循环内容的key
     :data-sources="data" //循环的数据
     :data-component="itemComponent" //循环的内容，这里由item.vue引
     :extra-props="{
       itemClick:itemClick,
       current:current
     }" //其他要传入循环内容的props
    />
</div>

import VirtualList from 'vue-virtual-scroll-list'
import Item from './item'
export default {
  name: '',
  components: {
    VirtualList
  },
  data() {
    return {
      itemComponent: Item,//虚拟滚动组件循环对象
      current: '',
      data: []//要循环的数据
    }
  },
  methods: {
    itemClick() { }
  }
}

这里将循环对象单独写了一个item.vue文件

<template>
  <div
    class="item"
    @mouseover="itemClick(index)"
  >
    {{ this.source.value }} //这里简单的输出了行数据里的value
  </div>
</template>

export default {
  props: {
    // 每一行的索引,基础props，不用传递
    index: {
      type: Number
    },
    // 每一行的内容,基础props，不用传递
    source: {
      type: Object,
      default() {
        return {}
      }
    },
    current: String,
    itemClick: Function
  }
}

详细文档看这里：vue-virtual-scroll-list - npm