Twitter-like Feed With Infinite Scroll - vue-list-scroller

Install & Download:

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

Description:

A Twitter feed style vertical list scroller with infinite scroll support.

The component makes use of ResizeObserver API to determine the screen size and auto-resize the content on different devices.

How to use it:

1. Import the vue-list-scroller component.

import ListScroller from 'vue-list-scroller'

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

<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 list scroller. Done.

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 },