Que en la actualidad el aprendizaje de la combinación de laravel con vue. Esta página se debe a que la obtención de enviar datos desde el servidor y mostrar en usuario de la línea de tiempo. Estoy con éxito obtener todos los datos y mostrarlos. Pero quiero implementar un infinito de desplazamiento en ella, pero yo no tenía idea de cómo hacerlo. yo había sido tratado de diferentes maneras también no funciona. Tal vez es mi conocimiento acerca de vue está aún fresco. Cualquier sugerencia para mí?

Aquí está mi código original :jsfiddle

Es aquí el código que me tratan de implementar infinito de desplazamiento con este ejemplo .

jsfiddle 2

El desplazamiento símbolo está mostrando, pero al parecer como la matriz ¿no pasar , los datos todavía aparecen todos en una sola vez.

Una vez presentado /feed el servidor devolverá la matriz que contienen información de post. Pero no sé cómo pasar a la lista de la matriz.

Array Devuelto

En vue
Cómo implementar infinito scroll en mi vue js

En ruta
Cómo implementar infinito scroll en mi vue js

  • usted necesita mostrar qué error/no está funcionando. 🙂
  • gracias por la respuesta. he actualizado mi código, por favor, eche un vistazo.
  • ¿alguien puede responder a esta pregunta stackoverflow.com/questions/55825170/…
InformationsquelleAutor masterhunter | 2017-04-04

4 Comentarios

  1. 17

    Instalación:

    npm install vue-infinite-scroll --save

    Registro en su 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>

    De componentes:

    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);
        }
      }
    });
    • he seguido tus instrucciones pero el infinite scroll todavía no está trabajando. jsfiddle
    • En mi laravel 5.4 reshources/assets/js/app.js se ha registrado con esto. require('vue-infinite-scroll'); Vue.use(infiniteScroll) const app = new Vue({ el: '#app', directives: {infiniteScroll}, store });
    • Mira esto! github.com/ElemeFE/vue-infinite-scroll debe ayudar 🙂 @masterhunter
    • Es realmente útil . ¿Tienes idea de cómo llamar a método de desplazarse a la parte superior? Gracias
  2. 2

    Una solución sería la instalación de un mecanismo de bloqueo para detener el rápido de las solicitudes para su backend. El bloqueo sería habilitado antes de hacer la petición y, a continuación, el bloqueo será desactivada cuando la solicitud ha sido completada y el DOM ha sido actualizado con el nuevo contenido (que extiende el tamaño de la 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 usted realmente necesita para (especialmente en dispositivos móviles), y puede limitar este evento para mejorar el rendimiento. Esta eficacia puede ser hecho 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!");
    });
    • su falta endOfPage() método
  3. 0

    basa en @ashishbansal la respuesta de

    para vue js 2… nota he utilizado ecma script 6 en su mayoría… si desea utilizar la antigua notación usted tiene que convertir

    listo ya está montada

    mounted() {
          let app = this;
          let distanceStartLoading = 300; //start loading stuff before reaching the very bottom right...
    
          var endOfPage = function endOfPage() {
                let bottomOfWindow = document.getElementsByTagName('body')[0].scrollTop + window.innerHeight >= document.documentElement.offsetHeight - distanceStartLoading;
                if (bottomOfWindow) {
                  return true;
                } else {
                  return false;
                }
              }
          ;(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("scrolling but not endofpage");
            if (endOfPage()) {
              console.log("hellow");
            }
            ;
          });
    
        },

Dejar respuesta

Please enter your comment!
Please enter your name here