@amirhshahbazi/vinfinite-scroll v1.0.3

Vinfinite Scroll

Infinite scroll component for Vue.js

• 🟩 Easy to use
• 🟩 SSR compatible

Vinfinite Scroll currently works with Vue 2.

Installation

yarn add @amirhshahbazi/vinfinite-scroll
# or using npm:
npm i @amirhshahbazi/vinfinite-scroll

Usage

Import the component

import VinfiniteScroll from "@amirhshahbazi/vinfinite-scroll"

Add the component to the end of the list you want to use

Every time the scroll position reaches vinfinite-scroll, the notifyEndReached is invoked.

  <div class="list">
    <div v-for="(item) in list" :key="item">
      {{ item }}
    </div>
    <vinfinite-scroll @notifyEndReached="notify"></vinfinite-scroll>
  </div>

Add data to the previous list whenever scroll is reached

  methods: {
    notify() {
      // fetch the rest of the data and add it to the list
    }
  }

Complete example

<template>
  <div class="list">
    <div v-for="(item) in list" :key="item">
      {{ item }}
    </div>
    <vinfinite-scroll @notifyEndReached="notify"></vinfinite-scroll>
  </div>
</template>

<script>
import VinfiniteScroll from "@amirhshahbazi/vinfinite-scroll"

export default {
  name: 'App',
  data() {
    return {
      list: []
    }
  },
  components: {
    'vinfinite-scroll': VinfiniteScroll
  },
  mounted() {
    // populate the list with some items
    this.list = Array.from({length: 100}, (v, k) => k + 1)
  },
  methods: {
    notify() {
      // fetch the rest of the data and add it to the list
      this.list = this.list.concat(Array.from({length: 100}, (v, k) => k + 1 + this.list.length))
    }
  }
}
</script>

Use with Nuxt

Inside plugins/vinfinite-scroll.js:

import Vue from 'vue'
import VinfiniteScroll from '@amirhshahbazi/vinfinite-scroll'

Vue.use(VinfiniteScroll)

In the pages or components:

<vinfinite-scroll @notifyEndReached="notify" />

License

MIT