Easy To Use For Displaying Large Lists In Vue.js Component

vue-list-scroller can help create a Twitter-like feed with thousands of items. Displays only the visible portion of the list.

infinite scroll example, vuejs query infinite scroll example, infinite scroll demo, vue infinite scroll javascript

Notes

Page mode only. Does not work inside an overflow container
Uses ResizeObserver
Objects can have any size and can be changed dynamically
Items can have margins
Supports infinite scrolling

Responsive Infinite Image Scroller With Vanilla JavaScript

How to make use of it:

Install and download:

# NPM
$ npm install vue-list-scroller --save

1. Import the vue-list-scroller component.

import ListScroller from 'vue-list-scroller'

2. Add the <list-scroller /> component to the application.

<list-scroller 
  :item-component="item" 
  :items-data="items" 
  :item-height="350" 
  class="list" 
  @bottom="addMore" />

3. Create the item template.

<template id="list-item">
  <div class="item">
    <img :src="imgUrl" />
    <div>
      <h1><b>Item {{ index }}</b></h1>
      {{ ' ' + data.text }}
    </div>
  </div>
</template>

4. Enable the menu scroller.

Vue.component('list-item', {
  template: '#list-item',
  props: {
    data: Object,
    index: Number,
  },
  computed: {
    imgUrl() {
      return `https://picsum.photos/id/${this.data.img}/500/200`
    },
  },
});

const lorem =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
  'Phasellus mattis at neque eu venenatis. Nam et sodales purus. ' +
  'Suspendisse pulvinar nisl purus, vel consequat neque varius vel. ' +
  'Ut ut consequat lorem. Nulla odio arcu, porta eu fringilla id, ' +
  'porta eget massa. Vivamus porta pulvinar ex, vel egestas erat ' +
  'rutrum vitae. Cras at felis malesuada, lacinia nulla non, ' +
  'tincidunt ligula. Sed facilisis mauris et metus commodo, ' +
  'sit amet porttitor mi efficitur. Cras et accumsan eros. Ut ' +
  'facilisis venenatis quam a luctus. Nam egestas dignissim viverra. ' +
  'Curabitur volutpat, enim et luctus faucibus, ex nisl ultrices est, ' +
  'in faucibus sapien libero vel arcu. Nullam placerat, mauris id ' +
  'vestibulum sollicitudin, lacus leo finibus mauris, nec efficitur ' +
  'neque ex sit amet arcu'

new Vue({
  el: "#app",
  data: { 
      items: [],
      item: Vue.component('list-item'),
  },
  methods: {
    addMore() {
      if (this.items.length > 10000) return

      for (let i = 0; i < 30; i++) {
        this.items.push({
          text: lorem.slice(0, 200 + Math.floor(Math.random() * 500)) + ' ...',
          img: Math.floor(Math.random() * 1000),
        })
      }
    },
  },
  created() {
    this.addMore()
  },
})

5. All possible props.

// Array of data that is passed to item
itemsData: { type: Array, required: true },
// Approximate item height (used at first render)
itemHeight: { type: Number, required: true },
// Vue js item component
itemComponent: { type: [Object, Function], required: true },
// Height of rendered part relative to viewport height
renderViewports: { type: Number, default: 3 },

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 the window inner height is 400, it will render 800 pixels before and after the visible part of the list
onItemResize: the name of the item component function that is called on item resize

Twitter-like Feed With Infinite Scroll, vue-list-scroller Plugin/Github