vue-list-scroller

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

View Demo View Github

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

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

npm install
npm run serve

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

Events

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

Similar projects

GitHub