vue-virtual-scroll-list alternatives and similar libraries
Based on the "PostCSS" category.
Alternatively, view vue-virtual-scroll-list alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing! -
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
jTools - Javascript web components
jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms. -
React Inline
DISCONTINUED. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
File Management with Preview
DISCONTINUED. A file management system built with Vue.js and TypeScript that allows for single and multiple file uploading with a preview feature -
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of vue-virtual-scroll-list or a related project?
README
<!-- --> <!-- -->
Table of contents
Advantages
Only 3 required props, simple and very easy to use.
Big data list with high render performance and efficient.
You don't have to care about item size, it will calculate automatic.
Live demo
https://tangbc.github.io/vue-virtual-scroll-list
https://codesandbox.io/s/live-demo-virtual-list-e1ww1
Simple usage
npm install vue-virtual-scroll-list --save
Root component:
<template>
<div>
<virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable
:data-key="'uid'"
:data-sources="items"
:data-component="itemComponent"
/>
</div>
</template>
<script>
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 }
}
</script>
Item component:
<template>
<div>{{ index }} - {{ source.text }}</div>
</template>
<script>
export default {
name: 'item-component',
props: {
index: { // index of current item
type: Number
},
source: { // here is: {uid: 'unique_1', text: 'abc'}
type: Object,
default () {
return {}
}
}
}
}
</script>
More usages or getting start you can refer to these clearly examples.
Props type
Required props
Prop | Type | Description |
---|---|---|
data-key |
String\ | Function |
data-sources |
Array[Object] | The source array built for list, each array data must be an object and has an unique key get or generate for data-key property. |
data-component |
Component | The render item component created / declared by vue, and it will use the data object in data-sources as render prop and named: source . |
Optional props
Commonly used Prop Type Default Description keeps Number 30 How many items you are expecting the virtual list to keep rendering in the real dom. extra-props Object {} Extra props assign to item component that are not in data-sources. Notice: index and source are both occupied inner. estimate-size Number 50 The estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is recommended to assign the average that calculate by yourself.
Uncommonly used Prop Type Default Description start Number 0 Setting scroll position stay start index. offset Number 0 Setting scroll position stay offset. scroll Event Emited when scrolling, param (event, range). totop Event Emited when scrolled to top or left, no param. tobottom Event Emited when scrolled to bottom or right, no param. resized Event Emited when item resized (mounted), param (id, size). direction String vertical Scroll direction, available values are vertical and horizontal page-mode Boolean false Let virtual list using global document to scroll through the list. top-threshold Number 0 The threshold to emit totop event, attention to multiple calls. bottom-threshold Number 0 The threshold to emit tobottom event, attention to multiple calls. root-tag String div Root element tag name. wrap-tag String div List wrapper element (role=group) tag name. wrap-class String List wrapper element class name. wrap-style Object {} List wrapper element inline style. item-tag String div Item wrapper element (role=item) tag name. item-class String Item wrapper element class name. item-class-add Function A function that you can return extra class (String) to item wrapper element, param (index). item-style Object {} Item wrapper element inline style. item-scoped-slots Object {} The $scopedSlots for item component. header-tag String div For using header slot, header slot wrapper element (role=header) tag name. header-class String For using header slot, header slot wrapper element class name. header-style Object {} For using header slot, header slot wrapper element inline style. footer-tag String div For using footer slot, footer slot wrapper element (role=footer) tag name. footer-class String For using footer slot, footer slot wrapper element class name. footer-style Object {} For using using footer slot, footer slot wrapper element inline style.
Public methods
Usefull public methods You can call these methods via ref: Method Description reset() Reset all state back to initial. scrollToBottom() Manual set scroll position to bottom. scrollToIndex(index) Manual set scroll position to a designated index. scrollToOffset(offset) Manual set scroll position to a designated offset. getSize(id) Get the designated item size by id (from data-key value). getSizes() Get the total number of stored (rendered) items. getOffset() Get current scroll offset. getClientSize() Get wrapper element client viewport size (width or height). getScrollSize() Get all scroll size (scrollHeight or scrollWidth). updatePageModeFront() When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually.
Attentions
This component use an in-place patch
strategy to render list instead of v-for
and :key
. This way achieves the best efficient, but only suitable when your list output does not rely on item component inner state or temporary DOM state (e.g. form input values).
But how to deal with such a situation? Without maintaining inner state, recommend to use props and dispatch (stateless component), here is an example keep-state.
Contributions
Welcome to improve this component with any issue, pull request or code review.
Changelogs
Maintain and update occasionally, for changes see release.
License
*Note that all licence references and agreements mentioned in the vue-virtual-scroll-list README section above
are relevant to that project's source code only.