/vue-list-scroller

Simple and easy to use Vue.js component for efficient rendering large lists

Primary LanguageJavaScriptMIT LicenseMIT

tests

vue-list-scroller

It can help with creating Twitter-like feed with thousands of items. It renders only visible part of the list.

Notes

  • Only page mode. It does not work inside an overflow container
  • Uses ResizeObserver
  • Items can have any size and change dynamically
  • Items can have margins
  • Supports infinite scroll

Usage

Add package to your project

npm install vue-list-scroller --save

Create item component

<template>
  <div>{{ 'Item ' + index + ' ' + data.text }}</div>
</template>

<script>
export default {
  props: {
    data: Object,
    index: Number,
  },
}
</script>

Add ListScroller component to your project

<template>
  <div>
    <list-scroller :itemComponent="item" :itemsData="items" :itemHeight="350" />
  </div>
</template>

<script>
import ListScroller from 'vue-list-scroller'
import Item from './item'

export default {
  components: { ListScroller },
  data() {
    return {
      items: [{ text: 'first' }, { text: 'second' }],
      item: Item,
    }
  },
}
</script>

Example

JSFiddle

You can clone this project and start example locally with these commands. It's in the dev folder.

npm install
npm run serve

ListScroller component interface

Props

  • itemsData: array of the data that is passed to items
  • itemHeight: approximate item height in pixels. it's used only at first rendering
  • itemComponent: vue js item component
  • renderViewports: height of the rendered part relative to viewport height. For example, if it's set to 5 and window inner height is 400, it will render 800 pixels before and after visible part of the list
  • onItemResize: the name of the item component function that is called on item resize

Events

  • bottom: emits when the last item is rendered. Used for infinite scroll

    Note: You need to disable scroll anchoring on the outer container. Without it after adding new items browser will scroll back to the bottom and bottom event will fire again.

    .container {
  overflow-anchor: none;
}

Item component interface

Props

These properties are passed to the item component, all are optional.

  • index (Number): index of the item in the itemsData array
  • data (Object): data of the item from itemsData array

Similar projects