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 () {}
    }
}

 

虚拟化加载

vue-virtual-scroller文档

安装

npm install --save vue-virtual-scroller

使用

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.component('RecycleScroller', RecycleScroller)

<RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.value }}
    </div>
  </RecycleScroller>

重要：设置高度，否则无效

.scroller {
  height: 200px;
}

结合使用

<RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  >
    <div class="user">
      {{ item.value }}
    </div>
  </RecycleScroller>

如何切换列表数据

如tab类型，点击另一个重新加载列表数据

可以先把原list设置[]，然后设置新数组

先设置成[]是为了让滚动条回到最顶部，需要在$nextTick里设置新数组

this.list = []
this.$nextTick(() => {
    this.list = otherList
})

效果如下：列表项已经有132数据，但是dom节点始终只有13个，以此保证性能

可能遇到的问题

1、滚动不加载，即loadMore方法不调用？

    有可能是因为你的元素包裹在v-if下，这样不会触发

2、无限滚动虚拟节点滚到下面都是空白？

    首先，你最好不要修改组件的样式，否则可能导致虚拟加载失效

    然后   item-size="32" 设置一下

3、虚拟加载没有生效，加载出了全部节点？

    滚动区域要设置高度

4、切换数据滚动条没有回到顶部

    可以先把原list设置[]，然后在$nextTick里设置新数组

 

测试代码