使用VueJS和vue資源進行無限滾動

Question

所以，我不能為我的生活弄清楚如何使用VueJS和vue-resource完成適當的無限滾動。 我的數據正在加載VueJS和vue-resource，但滾動和正確處理的觸發器是個問題。

有人知道怎么做這個嗎？ 我嘗試的所有嘗試都會導致大量的雙重請求，並通過重復請求向我的后端發送垃圾郵件。

到目前為止我嘗試過的：

• 將“this。$ http.get”請求包含到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