vue项目引入vue-virtual-scroller及使用

1.官网git地址：vue-virtual-scroller参考文章：https://www.jb51.net/article/175580.htm2.引入：1）项目使用全局组件：1.npm install -D vue-virtual-scroller2.在package.json引入："vue-virtual-scroller":"1.0.10"3.在man.js引入：import"...

文章共428字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

cnsummerLi

8947人浏览 · 2021-02-03 10:30:10

cnsummerLi · 2021-02-03 10:30:10 发布

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";

import VueVirtualScroller from "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.效果展示：