webentwicklung-frage-antwort-db.com.de

Wie man unendliche Schriftrollen in meinen vue js implementiert

Ich lerne gerade, Laravel mit Vue zu kombinieren. Diese Seite sollte Postdaten vom Server abrufen und in der Benutzerzeitleiste anzeigen. Ich bekomme erfolgreich alle Daten und zeige sie an. Aber ich möchte eine unendliche Schriftrolle darin implementieren, aber ich hatte keine Ahnung, wie es geht. Ich hatte viele verschiedene Methoden ausprobiert und auch nicht funktioniert. Vielleicht ist mein Wissen über vue noch frisch. Irgendwelche Vorschläge für mich?

Hier ist mein ursprünglicher Code: jsfiddle

Hier ist der Code, den ich versuche, unendliches Scrollen mit diesem Beispiel zu implementieren.

jsfiddle 2

Das Bildlaufsymbol wird angezeigt, aber es scheint, als würde das Array nicht durchlaufen. Die Daten erscheinen trotzdem alle auf einmal.

Nach dem Senden von /feed sendet der Server ein Array mit Postinformationen zurück. Aber ich weiß nicht, wie ich in das Listenfeld gehen soll.

Zurückgegebenes Array 

In vue  enter image description here

Auf der Route  enter image description here

javascriptphplaravelvue.js
10
masterhunter

Installation:

npm install vue-infinite-scroll --save

Registrierung in Ihrer 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}
})

Ihre HTML:

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

Ihre Komponente:

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

Eine Lösung wäre, einen Sperrmechanismus einzurichten, um schnelle Anfragen an Ihr Backend zu stoppen. Die Sperre wird aktiviert, bevor eine Anforderung erfolgt, und dann wird die Sperre deaktiviert, wenn die Anforderung abgeschlossen ist und das DOM mit dem neuen Inhalt aktualisiert wurde (wodurch die Seite vergrößert wird).

Zum Beispiel:

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

}; });

Beachten Sie auch, dass das Scroll-Ereignis mehr ausgelöst wird, als Sie wirklich benötigen (insbesondere auf mobilen Geräten), und Sie können dieses Ereignis drosseln, um die Leistung zu verbessern. Dies kann effizient mit requestAnimationFrame durchgeführt werden:

;(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

basierend auf @ ashishbansals Antwort

für vue js 2 ... Anmerkung: Ich habe meistens das Ecma-Skript 6 verwendet ... wenn Sie die alte Notation verwenden möchten, müssen Sie konvertieren

fertig ist jetzt montiert

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

Wenn Sie vue.js verwenden, ist die Verwendung von vue-infinite-scroll eine einfache und schnelle Lösung.

0
unnikked