vue-virtual-scroll-list 虚拟列表

vue-virtual-scroll-list官方地址：
官方地址https://www.npmjs.com/package/vue-virtual-scroll-listhttps://www.npmjs.com/package/vue-virtual-scroll-list

介绍：

 vue-virtual-scroll-list 虚拟滚动，解决数组大量卡顿问题

安装:

// npm 安装方式

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

// yarn 安装方式
yarn add vue-virtual-scroll-list -S

引入方式

      一、全局使（在 main.js 文件注册）

import VirtualList from 'vue-virtual-scroll-list'

Vue.component('virtual-list', VirtualList)

     二、局部文件使用引入

<script type="text/ecmascript-6">
   import VirtualList from "vue-virtual-scroll-list";

   export default {
      components: {
        VirtualList
      }
   }
</script>

页面使用

当前页面 （完成了上一步的引入后操作）
 <template>
    <virtual-list
      style="height: 400px; overflow-y: auto;"
      :data-key="'id'"
      :data-sources="dataList"
      :data-component="dataComponent"
      :keeps="10"
      :extra-props="{}"
      :estimate-size="50"/>
</template>

<script>
  import dataComponent from './dataComponent .vue'
  export default {
    data () {
      return {
        dataComponent : dataComponent 
      }
    }
 }
</script>

// dataComponent.vue（文件内容）
<template>
  <div
    class="item"
  >
    {{ source }} <!--这里简单的输出了行数据里的value-->
  </div>
</template>
<script>
export default {
  props: {
    // 每一行的索引,基础props，不用传递
    index: {
      type: Number
    },
    // 每一行的内容,基础props，不用传递
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>
 

参数文档

:data-key="某一行唯一标识符"
:data-sources="列表数据"
:data-component="单行数据需要展示的内容"
:keeps="虚拟列表在在页面展示的数量"
:extra-props="{
  这里传入想要给单行文件需要接受的数据
}"
:estimate-size="单行高度 方便精准计算滚动条"

详细讲解 extra-props 使用

 <template>
    <virtual-list
      style="height: 400px; overflow-y: auto;"
      :data-key="'id'"
      :data-sources="dataList"
      :data-component="dataComponent "
      :keeps="10"
      :extra-props="{
          datatype: datatype,
          fn: fn 
      }"
      :estimate-size="50"/>
</template>


<script>
  import dataComponent from './dataComponent.vue'
  export default {
    data () {
      return {
        dataComponent: dataComponent,
        datatype: false
      }
    },
    methods: {
      fn () {
        console.log('fn')
      }
    }
  }

</script>


// dataComponent 文件接受
<script>
export default {
  props: {
    datatype: {
      type: Number
    },
    fn : {
      type: function
    },
    // 每一行的索引,基础props，不用传递
    index: {
      type: Number
    },
    // 每一行的内容,基础props，不用传递
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>