How to implement infinite scroll in my vue js

Installation:

npm install vue-infinite-scroll --save

Registration in your main.js:

// register globallyvar infiniteScroll =  require('vue-infinite-scroll');Vue.use(infiniteScroll)// or for a single instancevar infiniteScroll = require('vue-infinite-scroll');new Vue({  directives: {infiniteScroll}})

Your html:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">  ...</div>

You component:

var count = 0;new Vue({  el: '#app',  data: {    data: [],    busy: false  },  methods: {    loadMore: function() {      this.busy = true;      setTimeout(() => {        for (var i = 0, j = 10; i < j; i++) {          this.data.push({ name: count++ });        }        this.busy = false;      }, 1000);    }  }});

One solution would be to setup a locking mechanism to stop rapid requests to your backend. The lock would be enabled before a request is made, and then the lock would be disabled when the request has been completed and the DOM has been updated with the new content (which extends the size of your page).

For example:

new Vue({// ... your Vue options.ready: function () {var vm = this;var lock = true;window.addEventListener('scroll', function () {  if (endOfPage() && lock) {    vm.$http.get('/myBackendUrl').then(function(response) {      vm.myItems.push(response.data);      lock = false;    });  };});

}; });

Another thing to keep in mind is that the scroll event is triggered more than you really need it to (especially on mobile devices), and you can throttle this event for improved performance. This can efficiently be done with requestAnimationFrame:

;(function() { var throttle = function(type, name, obj) {    obj = obj || window;    var running = false;    var func = function() {        if (running) { return; }        running = true;        requestAnimationFrame(function() {            obj.dispatchEvent(new CustomEvent(name));            running = false;        });    };    obj.addEventListener(type, func);};/* init - you can init any event */throttle ("scroll", "optimizedScroll");})();// handle eventwindow.addEventListener("optimizedScroll", function() {console.log("Resource conscious scroll callback!");});

I also tried the Vue-infinite-scroll, but it's not working properly when aligning with Vue-router, at least in my code.So I came up with my own solution.

<template>  <div ref="loadmore" class="infinite-container">      <!-- the inifite container -->  </div></template><script>export default {  data() {    return {      timer: null,      // check if is in infinite procees      busy: false    }  },  methods: {    infiniteScrollHandler() {        //check if container's bttom is overflow screen      let bottomOff =        this.$refs.loadmore.getBoundingClientRect().bottom - screen.height;      if (bottomOff < 10 && !this.busy) {        console.log("loading... " + new Date());        this.busy = true;        // do something         this.busy = false;      }    },    setIntervalTimer() {      //check every 500 milliseconds      this.timer = setInterval(() => {        this.infiniteScrollHandler();      }, 500);    }  },  mounted() {      // set up timer on mounted    this.setIntervalTimer();  },  beforeDestroy() {      // do not forget clear the interval timer    clearInterval(this.timer);  }};</script>