Easy Vue Virtual Scroll List Component

A Vue component supports big data by using virtual scroll list. Tiny, smooth, and without any dependence.

How to use it:

1. Import and register the component.

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

export default {
  components: { 'virtual-list': VirtualList }
}

2. Add the virtual-list component to the template.

<template>
  <div>
    <virtual-list style="height: 400px; overflow-y: auto;"
      :data-key="'uid'"
      :data-sources="items"
      :data-component="itemComponent"
    />
  </div>
</template>

3. Define your list items.

<template>
  <div>{{ index }} - {{ source.text }}</div>
</template>
<script>
  export default {
    name: 'item-component',
    props: {
      index: { // number index
        type: Number
      },
      source: { // {uid: 'unique_1', text: 'abc'}
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

// root component
import Item from './Item'
import VirtualList from 'vue-virtual-scroll-list'
export default {
  name: 'root',
  data () {
    return {
      itemComponent: Item,
      items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text: 'xyz'}, ...]
    }
  },
  components: { 'virtual-list': VirtualList }
}

4. Available props.

dataKey: {
  type: [String, Function],
  required: true
},
dataSources: {
  type: Array,
  required: true
},
dataComponent: {
  type: [Object, Function],
  required: true
},
keeps: {
  type: Number,
  default: 30
},
extraProps: {
  type: Object
},
estimateSize: {
  type: Number,
  default: 50
},
direction: {
  type: String,
  default: 'vertical' // the other value is horizontal
},
start: {
  type: Number,
  default: 0
},
offset: {
  type: Number,
  default: 0
},
topThreshold: {
  type: Number,
  default: 0
},
bottomThreshold: {
  type: Number,
  default: 0
},
pageMode: {
  type: Boolean,
  default: false
},
rootTag: {
  type: String,
  default: 'div'
},
wrapTag: {
  type: String,
  default: 'div'
},
wrapClass: {
  type: String,
  default: ''
},
wrapStyle: {
  type: Object
},
itemTag: {
  type: String,
  default: 'div'
},
itemClass: {
  type: String,
  default: ''
},
itemClassAdd: {
  type: Function
},
itemStyle: {
  type: Object
},
headerTag: {
  type: String,
  default: 'div'
},
headerClass: {
  type: String,
  default: ''
},
headerStyle: {
  type: Object
},
footerTag: {
  type: String,
  default: 'div'
},
footerClass: {
  type: String,
  default: ''
},
footerStyle: {
  type: Object
},
itemScopedSlots: {
  type: Object
}

5. Item props.

index: {
  type: Number
},
event: {
  type: String
},
tag: {
  type: String
},
horizontal: {
  type: Boolean
},
source: {
  type: Object
},
component: {
  type: [Object, Function]
},
slotComponent: {
  type: Function
},
uniqueKey: {
  type: [String, Number]
},
extraProps: {
  type: Object
},
scopedSlots: {
  type: Object
}

6. Slot props.

event: {
  type: String
},
uniqueKey: {
  type: String
},
tag: {
  type: String
},
horizontal: {
  type: Boolean
}

7. API methods.

• reset()
• scrollToBottom()
• scrollToIndex(index)
• scrollToOffset(offset)
• getSize(id)
• getSizes()
• getOffset()
• getClientSize()
• getScrollSize()
• updatePageModeFront()

Preview:

Changelog:

v2.3.5 (05/29/2023)

• Bugfixes

v2.3.4 (08/25/2022)

• Bugfix

v2.3.3 (09/06/2021)

• Bugfix

v2.3.2 (11/24/2020)

• Calculate correct average size

v2.3.1 (07/25/2020)

• Fixed TypeError: Unable to get property ‘slotHeaderSize’ of undefined or null reference
• Response to update when `keeps` changes

v2.3.0 (06/18/2020)

• Bugfix

Download Details:

Author: tangbc

Live Demo: https://tangbc.github.io/vue-virtual-scroll-list/#/fixed-size

Download Link: https://github.com/tangbc/vue-virtual-scroll-list/archive/master.zip

Official Website: https://github.com/tangbc/vue-virtual-scroll-list

Install & Download:

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