使用 VueJS 和 vue-resource 进行无限滚动答案

【问题标题】：Infinite scroll with VueJS and vue-resource使用 VueJS 和 vue-resource 进行无限滚动
【发布时间】：2016-01-28 03:59:51
【问题描述】：

所以，我一生都无法弄清楚如何使用 VueJS 和 vue-resource 完成正确的无限滚动。我的数据是使用 VueJS 和 vue-resource 加载的，但问题是滚动触发和正确处理。

有人知道怎么做吗？我尝试的所有尝试都会导致大量重复请求，并通过重复请求向我的后端发送垃圾邮件。

到目前为止我已经尝试过：

将“this.$http.get”请求包装到 window.scroll 的 en 事件侦听器和其中的条件中，用于检查是否到达页面底部。这总是会两次甚至多次触发获取请求，而不是一次触发然后再次等待加载。
做类似的事情，但在列表的最底部有一个元素，我会检查它是否在视图中。多次触发获取请求也是如此。

【问题讨论】：

你能用你目前尝试过的内容来编辑你的帖子吗？
你可以在 vue 实例中设置一个布尔值。 isFetching = false;。然后，仅当 isFetching 为 false 时才获取数据。您在获取数据时将其设置为 true，并在获取数据后将其设置回 false。

标签： javascript ajax laravel vue.js

【解决方案1】：

一种解决方案是设置锁定机制来阻止对后端的快速请求。锁将在发出请求之前启用，然后当请求完成并且 DOM 已更新为新内容（这会扩展页面的大小）时，锁将被禁用。

例如：

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

要记住的另一件事是，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!");
});

来源：https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Example

【讨论】：