web-dev-qa-db-fra.com

Comment implémenter le parchemin infini dans ma vue js

J'apprends actuellement à combiner laravel avec vue. Cette page devrait récupérer les données de publication du serveur et s'afficher dans la chronologie de l'utilisateur. Je réussis à obtenir toutes les données et à les afficher. Mais je veux implémenter un parchemin infini mais je ne savais pas comment le faire. On m'avait essayé de nombreuses façons différentes aussi ne fonctionnait pas Peut-être que ma connaissance de la vue est encore fraîche. Une suggestion pour moi?

Voici mon code original: jsfiddle

Voici le code que j'essaye d'implémenter le défilement infini avec cet exemple .

jsfiddle 2

Le symbole de défilement est affiché, mais il semble que le tableau ne passe pas, les données apparaissent toujours en même temps.

Une fois soumis, /feed, le serveur renverra un tableau contenant des informations sur les publications. Mais je ne sais pas comment passer dans le tableau de liste.

Tableau retourné 

En vue  enter image description here

En route  enter image description here

javascriptphplaravelvue.js
10
masterhunter

Installation:

npm install vue-infinite-scroll --save

Inscription dans votre 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}
})

Votre html:

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

Votre composant:

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);
    }
  }
});
14
Gabriel Robert

Une solution serait de mettre en place un mécanisme de verrouillage pour arrêter les requêtes rapides adressées à votre backend. Le verrou serait activé avant qu'une demande soit faite, puis il serait désactivé une fois la demande terminée et le DOM mis à jour avec le nouveau contenu (ce qui étend la taille de votre page).

Par exemple:

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

}; });

Une autre chose à garder à l'esprit est que l'événement de défilement est déclenché plus que nécessaire (en particulier sur les appareils mobiles), et vous pouvez limiter cet événement pour améliorer les performances. Cela peut être fait efficacement avec 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!");
});
2
ashish bansal

basé sur la réponse de @ ashishbansal

pour la vue js 2 ... note j'ai utilisé ecma script 6 surtout ... si vous voulez utiliser l'ancienne notation vous devez convertir

prêt est maintenant monté

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

    },
0
Toskan

Si vous utilisez vue.js, une solution simple et rapide consiste à utiliser vue-infinite-scroll .

0
unnikked