如何在我的vue js中实现无限滚动

Question

我目前正在学习结合 laravel 和 vue。该页面应该从服务器获取发布数据并显示在用户时间轴中。我成功获取所有数据并显示它。但我想在其中实现无限滚动，但我不知道该怎么做。我已经尝试过很多不同的方式也没有用。也许是我对 vue 的了解还很新鲜。对我有什么建议吗？

这是我的原始代码： jsfiddle

这是我尝试用这个 例子 实现无限滚动的代码。

小提琴 2

滚动符号显示但似乎数组没有通过，数据仍然一次出现。

一旦提交 /feed 服务器将返回包含帖子信息的数组。但我不知道如何传递到列表数组中。

返回数组

在视图中

在途中

原文由 masterhunter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

安装：

 npm install vue-infinite-scroll --save

在你的 main.js 中注册：

 // register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

你的 HTML：

 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

你的组成部分：

 var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

原文由 Gabriel Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一种解决方案是设置锁定机制以停止对后端的快速请求。锁定将在发出请求之前启用，然后当请求完成并且 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;
    });
  };
});

}; });

另一件要记住的事情是，滚动事件的触发次数超出了您真正需要的次数（尤其是在移动设备上），您可以限制此事件以提高性能。这可以通过 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!");
});

原文由 ashish bansal 发布，翻译遵循 CC BY-SA 3.0 许可协议