Vue Infinite Scroll Component

A simple vue infinite scroll component with animated effect while scrolling page it’ll show loading image will append next page data.

Install

NPM

npm install vue-scroll-loader

CDN

<script src="https://unpkg.com/vue-scroll-loader"></script>

Usage

Put <scroll-loader/> below the list, and use loader-* props to define its options.

When the scroll-loader reaches the bottom of the viewport, the method specified by loader-method is executed.


<scroll-loader :loader-method="getImageList" :loader-disable="disable">
</scroll-loader>

<!-- Replace the default loading animation with slot -->
<scroll-loader :loader-method="getImageList" :loader-disable="disable">
   <div>Loading...</div>
</scroll-loader>
import Vue from 'vue'
import ScrollLoader from 'vue-scroll-loader'

Vue.use(ScrollLoader)

new Vue({
    el: '#app',
    data() {
      return {
        disable: false,
        page: 1,
        pageSize: 30,
        images: [],
      }
    },
    methods: {
      getImageList() {
        axios.get('https://api.example.com/', {
            params: {
              page: this.page++,
              pageSize: this.pageSize,
            }
          })
          .then(res => {
            this.images = [...this.images, ...res.data]

            // Stop scroll loading...
            this.disable = res.data.length < this.pageSize
          })
          .catch(error => {
            console.log(error);
          })
      }
    }
  })


Options

Props Description Required Type Default
loader-method Scrolling to the bottom to execute the method. true Function
loader-disable Scroll-loader will be disabled if the value of this props is true. false Boolean false
loader-distance The minimum distance between the scroll-loader and the bottom of the viewport before the loader-method method is executed. false Number 0
loader-color scroll-loader the color of the animation. false String #CCCCCC
loader-size scroll-loader the size of the animation. false Number 50
loader-viewport scroll-loader relative viewport element,default top-level document viewport. false Element viewport

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by molvqingtai. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.