How to implement an infinite scroll in my vue js

Question

I am currently involved in combining laravel with vue. This page should retrieve data from the server and display it on the user's timeline. I successfully get all the data and show it. But I want to introduce an endless scroll into it, but I had no idea how to do this. I also tried many times and did not work. Perhaps my knowledge of vue is still fresh. Any suggestion for me?

Here is my original code: jsfiddle

Here is the code I'm trying to implement infinite scrolling with.

jsfiddle 2

The scroll symbol is shown, but it seems that the array has not passed, the data still appears at a time.

After sending /feed server will return an array containing information about the message. But I do not know how to go to the list array.

Returned array

In vue

On my way

Answer 1

Installation:

 npm install vue-infinite-scroll --save 

Register in your main.js:

 // register globally var infiniteScroll = require('vue-infinite-scroll'); Vue.use(infiniteScroll) // or for a single instance var 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> 

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); } } }); 

Answer 2

One solution would be to set up a locking mechanism to stop fast requests to your server. The lock will be enabled before the request is executed, and then the lock will be disabled when the request is completed and the DOM will be updated with 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 fires more than you really need (especially on mobile devices), and you can throttle this event to increase performance. This can be done efficiently 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 event window.addEventListener("optimizedScroll", function() { console.log("Resource conscious scroll callback!"); }); 

Answer 3

If you are using vue.js, a simple and quick solution is to use vue-infinite-scroll .