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

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

首先是安装插件

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

页面使用

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文件

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

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