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

Posted 2023-02-22

【中文标题】使用 VueJS 和 vue-resource 进行无限滚动

【英文标题】：Infinite scroll with VueJS and 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。

【参考方案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