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.效果展示:

 

 

 

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐