无限滚动VueJS和vue资源

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

有谁知道如何做到这一点？我尝试过的所有尝试都会导致大量的双重请求，并通过重复请求发送垃圾邮件给我的后端。

我试过到目前为止：

包缠“这$ http.get。”请求转换为EN事件侦听器window.scroll和范围内的条件，检查如果底部的页面已达到。这会一直增加两倍甚至多次触发获取请求，而不是一次触发，然后再次等待加载。
做了类似的事情，但在列表的最底部有一个元素，我会检查它是否在视图中。多触发获取请求也是一样。

来源

2015-10-28 aFreshMelon

你能与您到目前为止已经试过什么编辑您的帖子？ –

@ThomasKim完成 – aFreshMelon

您可以在vue实例中设置一个布尔值。 'isFetching = false;'。然后，如果'isFetching'为false，则只能获取数据。您在获取数据时将其设置为true，并在数据获取后将其设置为false。 –

一个解决方案是设置一个锁定机制来停止对后端的快速请求。在发出请求之前将启用锁定，然后当请求完成并且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事件触发超过你真的需要它（特别是在移动设备上），并且可以扼杀这种情况下，以提高性能。这能够高效地完成：

;(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

来源

2016-01-02 13:32:59

无限滚动VueJS和vue资源

回答

相关问题