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 .
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é
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);
}
}
});
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!");
});
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");
}
;
});
},
Si vous utilisez vue.js, une solution simple et rapide consiste à utiliser vue-infinite-scroll .