Infinite Scroll Loader Componnet – vue-scroll-loader

Install & Download:

# NPM
$ npm install vue-scroll-loader --save

Description:

An animated loader for the infinite scroll on your web app.

How to use it:

1. Import the register the infinite scroll loader.

import Vue from 'vue'
import ScrollLoader from 'vue-scroll-loader'

Vue.use(ScrollLoader)

2. Insert the scroll loader into the template.

<scroll-loader :loader-method="getImagesList" :loader-disable="disable">
  <div>Loading...</div>
</scroll-loader>

3. Create an infinite scrolling web app as follows:

new Vue({
    el: '#app',
    data() {
      return {
        disable: false,
        page: 1,
        pageSize: 30,
        images: [],
        masksHide: []
      }
    },
    methods: {
      getImagesList() {
        axios.get('https://api.unsplash.com/photos', {
          params: {
            page: this.page++,
            per_page: this.pageSize,
            client_id: 'e874834b096dcd107c232fe4b0bb521158b62e486580c988b0a75cb0b77a2abe'
          }
        }).then(res => {
          res.data && (this.images = [...this.images, ...res.data])
        }).catch(error => {
          console.log(error)
        })
      }
    },
    watch: {
      page (value) {
        this.disable = value > 10
      }
    }
})

4. Possible props to customize the scroll loader.

<scroll-loader 
  :loader-method="getImagesList" 
  :loader-disable="disable"
  :loader-distance="0"
  :loader-color="#666"
  :loader-size="50"
  :loader-viewport="viewport"
  >
  <div>Loading...</div>
</scroll-loader>