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


See Demo And Download

Official Website(IvanSafonov): Click Here

This superior jQuery/javascript plugin is developed by IvanSafonov. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…