使用 VueJS 和 vue-resource 无限滚动

Question

所以，我这辈子都想不出如何使用 VueJS 和 vue-resource 来完成适当的无限滚动。我的数据正在使用 VueJS 和 vue-resource 加载，但滚动触发和正确处理是个问题。

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

到目前为止我尝试过的：

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

Answer 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

使用 VueJS 和 vue-resource 无限滚动

Infinite scroll with VueJS and vue-resource

javascript

ajax

laravel

vue.js