laravel 使用 VueJS 和 vue-resource 无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33390036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Infinite scroll with VueJS and vue-resource
提问by aFreshMelon
So, I can't for the life of me figure out how to get a proper infinite scroll done with VueJS and vue-resource. My data is loading with VueJS and vue-resource, but the trigger on scroll and proper handling is the issue.
所以，我一生都无法弄清楚如何使用 VueJS 和 vue-resource 完成适当的无限滚动。我的数据正在加载 VueJS 和 vue-resource，但滚动触发器和正确处理是问题所在。
Does anybody know how to do this? All attempts I tried lead to loads of double requests and spamming my backend with repeat requests.
有人知道怎么做这个吗？我尝试过的所有尝试都会导致大量重复请求，并通过重复请求向我的后端发送垃圾邮件。
What I've tried so far:
到目前为止我尝试过的：
Wrapping the "this.$http.get" request into a en event listener for window.scroll and a conditional within that, which checks if the bottom of the page is reached. This would alway double or even multi-trigger the get request instead of just one trigger and then waiting for load again.
Doing something similar but with an element at the very bottom of the list where I would check if it was in view. The same thing with multi-triggering get requests.
将“this.$http.get”请求包装到 window.scroll 的 en 事件侦听器和其中的条件中，以检查是否到达页面底部。这将始终加倍甚至多次触发 get 请求，而不是仅触发一次然后再次等待加载。
做一些类似的事情，但在列表的最底部有一个元素，我会检查它是否在视图中。多触发获取请求也是如此。
采纳答案by Amir Rustamzadeh
One solution would be to setup a locking mechanism to stop rapid requests to your backend. The lock would be enabled before a request is made, and then the lock would be disabled when the request has been completed and the DOM has been updated with the new content (which extends the size of your page).
一种解决方案是设置锁定机制来阻止对后端的快速请求。锁定将在发出请求之前启用，然后当请求完成且 DOM 已更新为新内容（这会扩展页面的大小）时，锁定将被禁用。
For example:
例如：
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;
});
};
});
};
});
Another thing to keep in mind is that the scrollevent is triggered more than you really need it to (especially on mobile devices), and you can throttle this event for improved performance. This can efficiently be done with requestAnimationFrame:
要记住的另一件事是，该scroll事件的触发次数超出了您的实际需要（尤其是在移动设备上），您可以限制该事件以提高性能。这可以通过以下方式有效地完成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!");
});
Source: https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Example
来源：https: //developer.mozilla.org/en-US/docs/Web/Events/scroll#Example
