ivansafonov/vue-list-scroller

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

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

• vue-virtual-scroll-list
• vue-virtual-scroller

vue-list-scroller's Issues

List does not update if vue-list-scroller is used inside an overflow container

Your event mixins appear to only target the window, which breaks any cases where it is used inside an overflow container.

In this case, vue-list-scroller isn't listening to the scroll event on my overflow container, so when I scroll down the overflow container, vue-list-scroller isn't updating which items are rendered.

Check this jsfiddle (scroll down to see the problem): http://jsfiddle.net/jv6k0L37/