0
293
ViewsCómo implementar scroll infinito en mi vue js
Actualmente estoy aprendiendo a combinar laravel con vue. Esta página debe obtener datos de publicación del servidor y mostrarse en la línea de tiempo del usuario. Obtuve con éxito todos los datos y los visualicé. Pero quiero implementar un desplazamiento infinito en él, pero no tenía idea de cómo hacerlo. Me habían intentado de muchas maneras diferentes y tampoco funcionaba. Tal vez mi conocimiento sobre vue aún esté fresco. ¿Alguna sugerencia para mí?
Aquí está mi código original: jsfiddle
Aquí está el código que trato de implementar el desplazamiento infinito con este ejemplo .
El símbolo de desplazamiento se muestra, pero parece que la matriz no pasó, los datos aún aparecen todos a la vez.
Una vez enviado /feed el servidor devolverá una matriz que contiene información de la publicación. Pero no sé cómo pasar a la matriz de listas.
Matriz devuelta
en vista 
En ruta o en camino 
3 answers
Answer question0
Instalación:
npm install vue-infinite-scroll --saveRegistro en tu 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} })Tu html:
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> ... </div>Tu componente:
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); } } });0
Una solución sería configurar un mecanismo de bloqueo para detener las solicitudes rápidas a su backend. El bloqueo se habilitaría antes de que se realice una solicitud y luego se deshabilitaría cuando la solicitud se haya completado y el DOM se haya actualizado con el nuevo contenido (que amplía el tamaño de su página).
Por ejemplo:
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; }); }; });}; });
Otra cosa a tener en cuenta es que el evento de desplazamiento se activa más de lo que realmente necesita (especialmente en dispositivos móviles), y puede acelerar este evento para mejorar el rendimiento. Esto se puede hacer de manera eficiente con 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!"); });0
También probé Vue-infinite-scroll, pero no funciona correctamente cuando se alinea con Vue-router, al menos en mi código. Así que se me ocurrió mi propia solución.
<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>