1.官網git地址：vue-virtual-scroller

參考文章：https://www.jb51.net/article/175580.htm

2.引入：

1）專案使用全域性元件：

1.npm install -D vue-virtual-scroller

2.在package.json引入："vue-virtual-scroller":"1.0.10"

3.在man.js引入：

import"vue-virtual-scroller/dist/vue-virtual-scroller.css";

importVueVirtualScrollerfrom"vue-virtual-scroller";

Vue.use(VueVirtualScroller);
 

4.在vue中使用：

<template>
    <div>
       <RecycleScroller
        class="scroller"
        :items="items"
        :item-size="32">
            <template slot-scope="props">
            <li :key="props.itemKey">{{props.item.name}}</li>
          </template> 
         </RecycleScroller>
     </div>


</template>
export default {
    name:'test',
     data () {
        return {
             items:[
            {
              "id": "601919b2d2e8a87934751e85",
              "age": 27,
              "name": "Maldonado Puckett1",
              "company": "LEXICONDO"
            },
            {
              "id": "601919b2d2e8a87934751e856",
              "age": 27,
              "name": "Maldonado Puckett",
              "company": "LEXICONDO"
            },
            {
              "id": "601919b2d2e8a87934751e855",
              "age": 27,
              "name": "Maldonado 222",
              "company": "LEXICONDO"
            },
            {
              "id": "601919b2d2e8a87934751e854",
              "age": 27,
              "name": "Maldonado 33",
              "company": "LEXICONDO"
            },
            {
              "id": "601919b2d2e8a87934751e853",
              "age": 27,
              "name": "Maldonado 44",
              "company": "LEXICONDO"
            },
            {
              "id": "601919b2d2e8a87934751e852",
              "age": 27,
              "name": "Maldonado 55",
              "company": "LEXICONDO"
            }
           ]
        };
    },
     mounted() {},
      methods: {}

}

<style lang='css' scoped>
.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>
 

5.效果展示：