vue 滚动加载无限长列表

结合vue-infinite-scroll和vue-virtual-sroller实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能，解决列表数据量大页面卡顿问题

滚动加载vue-infinite-scroll

vue-infinite-scroll文档

采用指令方式实现滚动到底部加载

安装

npm install vue-infinite-scroll --save

使用

<template>
 <div
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  >
    {
  { item.value }}
  </div>
</template>

import infiniteScroll from 'vue-infinite-scroll'

export default {
    directives: { infiniteScroll },
    methods: {
        loadMore () {}
    }
}

 

虚拟化加载