vue-virtual-auto-scroller

A high-performance Vue plugin for virtual scrolling with auto-scroll support

Installation

npm install --save vue-virtual-auto-scroller

yarn add vue-virtual-auto-scroller

Default import

Import and register the plugin in your Vue project:

import VueVirtualAutoScroller from 'vue-virtual-auto-scroller'
import 'vue-virtual-auto-scroller/dist/vue-virtual-auto-scroller.css'

Vue.use(VueVirtualAutoScroller)

Usage

Example of using the vue-virtual-auto-scroller:

<template>
  <vue-virtual-auto-scroller
    :data-array="lists"
    :class-option="{ itemHeight: 20, increment: 1 }"
    container-height="100px"
  >
    <template v-slot:default="item">
      <div>{{ item.name }}</div>
    </template>
  </vue-virtual-auto-scroller>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {name: 1},
        {name: 2},
        {name: 3},
        {name: 4},
        {name: 5},
        {name: 6},
        {name: 7},
        {name: 8},
        {name: 9},
        {name: 10},
      ]
    }
  },
}
</script>

Props

• dataArray: A list of items you want to display in the scroller.
• containerHeight: Height of the scroller container.
• autoScroll(default: true): Enables or disables auto-scrolling.
• classOption(default: {itemHeight: 44, increment: 1, delay: 0}): Configuration for scroller styles.
  • itemHeight: Height of a single scroll element.
  • increment: Pixels scrolled per frame, not less than 1.

Features

• Virtual Scrolling: Efficiently manages DOM rendering for large lists.
• Auto-Scrolling: Automatically scrolls through items based on specified increments and delays.
• Customizable Styles: Easily customize item heights and other scroll parameters through props.