v-virtual-scroller

基于vue的虚拟滚动组件

特性

• 支持横向、纵向、横纵使用三种虚拟滚动方式。
• 支持不同长度的元素。

用法

1. 安装插件

   npm i v-virtual-scroller

2. 使用

注册为全局组件

import virtualScroller from 'v-virtual-scroller';
Vue.use(virtualScroller,'g'); //第二个参数为组件名前缀，选填。

或者按需引用

import {virtualScroller,virtualScrollerTable} from 'v-virtual-scroller';

export default {
    name: 'App',
    components: { virtualScroller，virtualScrollerTable },
}

virtual-scroller

单向虚拟滚动组件

基本用法

<template>
<virtual-scroller :items="items" v-slot="{ index, size, active }">
                <div>{{ index }}{{ size }} {{ active }}</div>
  </virtual-scroller>
</tempalte>
<script>
export default {
    data() {
        return {
            items: [20, 20, 20, 20, 20],
        };
    },
};
</script>

组件props参数

参数	说明	类型	是否必填	可选值	默认值
items	元素长度集合（以px为单位）	array	是
direction	虚拟滚动方向	string	否	vertical,horizontal	vertical

元素slot参数

参数	说明	类型
size	元素的长度	number
index	元素在集合的位置	number
active	元素激活状态	Boolean

组件事件

参数	说明	回调参数
scroll	列表滚动时触发	偏移值

virtual-scroller-table

同时支持横向纵向的虚拟滚动组件

基本用法

<template>
    <virtual-scroller-table
                            :cols="cols"
                            :rows="rows"
                            v-slot="{ rowIndex, colIndex, active }"
                            >
        <div>{{ colIndex }}{{ colIndex }} {{ active }}</div>
    </virtual-scroller-table>
</tempalte>
<script>
export default {
    data() {
        return {
            rows: [20, 20, 20, 20, 20],
            cols: [20, 20, 20, 20, 20]
        };
    },
};
</script>

组件props参数

参数	说明	类型	是否必填	可选值	默认值	举例
rows	元素行长度集合（以px为单位）	array	是			[20,20,20,20,20]
cols	元素列长度集合（以px为单位）	array	是			[20,20,20,20,20]

元素slot参数

参数	说明	类型
rowIndex	元素在行集合的位置	number
colIndex	元素在列集合的位置	number
height	元素高度	number
width	元素宽度	number
active	元素激活状态	Boolean

组件事件

参数	说明	回调参数
scroll	列表滚动时触发	left ：横向偏移值， top：纵向偏移值

参考

再谈前端虚拟列表的实现

无尽滚动的复杂度 -- 来自 Google 大神的拆解