Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
dev
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

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

Topics

Resources

License

Packages

No packages published
You can’t perform that action at this time.