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

License

IvanSafonov/vue-list-scroller

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages