🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

High level Vue.js 2.x component for virtual list where each item height is not known before render.

Scroll

Documentation

vue-auto-virtual-scroll-list

High level component for virtual list where each item height is not known before render

npm version package-size

Live Demo

Properties

Prop Type Required/Default Description
totalHeight Number ✓ Container height (px): used to calculate the # of components rendered
defaultHeight Number ✓ Item expected height (px). Set to your item's minimum height
extraItems Number 1 Extra items rendered (extra items rendered to avoid empty space while scrolling)

Usage

With template

<template>   <VueAutoVirtualScrollList     :totalHeight="800"     :defaultHeight="80"     style="width: 100%;"   >     <div       v-for="item in items"         :style="{ height: `${item.height}px` }"     >       {{ item.name }}     </div>   </VueAutoVirtualScrollList> </template>  <script> import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'  export default {   ...   components: { VueAutoVirtualScrollList },   ... } </script>

With jsx

import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'  export default {   ...   render(h) {     return (       <VueAutoVirtualScrollList         totalHeight={800}         defaultHeight={80}       >         {items.map((item) => (           <div style={{ height: `${item.height}px` }}>             { item.name }           </div>         ))}       </VueAutoVirtualScrollList>     )   },   ... }

How it works

The number of rendered components is calculated by accumulating each item height to see how many fit in totalHeight. Each item height is assumed to be defaultHeight, until it is actually rendered. When that happens the correct value is cached and used for later calculations

Motivation

The worst case scenario for lists is when each item has multi-line text mixed with other content, which make it very hard to know the component height before render happens. This component makes it easy to use this kind of list without further problems

TODO

  • Support for infinite scroll

You May Also Like