Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载，解决数据量过多时 页面卡顿、体验差的问题

<template>
  <div style="height: 650px;">
    <virtual-list 
      style="height: 100%; overflow-y: auto;"
      :data-key="'id'"
      :data-sources="list"
      :data-component="itemComponent"
      :keeps="20"
      :extra-props="{
        address,
        basisInfo,
      }"
      @tobottom="listToBottom"/>
  </div>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list';
import itemComponent from './itemComponent';
export default {
  data(){
    return {
      VirtualList,
      itemComponent,
      list: [],
      address:{ province:'江苏',city:'南京' },
      basisInfo:[{age:20}] 
    }
  },
  components: {},
  methods:{
    content(){
      for(let i = 0; i < 10000; i++){
        const obj = {id: i, name: `人员${i}`};
        this.list.push(obj) 
      }
    },
    listToBottom(){
      console.log('到底了哦');
    },
  },
  mounted(){
    this.content()
  }
}
</script>

<template>
  <div>
    编号：{{ index }} <br/>
    姓名：{{ source.name }}<br/> 
    年龄：{{basisInfo[0].age}}<br/>
    地址：{{address.province}}-{{address.city}}
    <hr/>
  </div>
</template>
<script>
  export default {
    name: 'item-component',
    props: {
      // index of current item
      index: { 
        type: Number
      },
      source: { 
        type: Object,
        default () {
          return {}
        }
      },
      address:{
        type: Object,
        default () {
          return {}
        }
      },
      basisInfo:{
        type: Array,
        default () {
          return []
        }  
      }
    },
    mounted(){}
  }
</script>