Question

所以，我不能为我的生活弄清楚如何使用VueJS和vue-resource完成适当的无限滚动。我的数据正在加载VueJS和vue-resource，但是滚动和正确处理的触发器就是问题。

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

到目前为止我已尝试过：

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

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进行无限滚动

1 个答案: