v-virtual-scroller

virtualScroll component with vue2

Usage no npm install needed!

<script type="module">
  import vVirtualScroller from 'https://cdn.skypack.dev/v-virtual-scroller';
</script>

README

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 大神的拆解