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

Question

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

这是我的原始代码：jsfiddle

这是我尝试使用example 实现无限滚动的代码。

jsfiddle 2

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

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

返回数组

在 Vue 中

在路线中

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);
    }
  }
});

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!");
});

Answer 3

我也尝试了 Vue-infinite-scroll，但在与 Vue-router 对齐时它不能正常工作，至少在我的代码中是这样。 所以我想出了自己的解决方案。

<template>
  <div ref="loadmore" class="infinite-container">
      <!-- the inifite container -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      // check if is in infinite procees
      busy: false
    }
  },
  methods: {
    infiniteScrollHandler() {
        //check if container's bttom is overflow screen
      let bottomOff =
        this.$refs.loadmore.getBoundingClientRect().bottom - screen.height;
      if (bottomOff < 10 && !this.busy) {
        console.log("loading... " + new Date());
        this.busy = true;
        // do something 
        this.busy = false;
      }
    },
    setIntervalTimer() {
      //check every 500 milliseconds
      this.timer = setInterval(() => {
        this.infiniteScrollHandler();
      }, 500);
    }
  },
  mounted() {
      // set up timer on mounted
    this.setIntervalTimer();
  },
  beforeDestroy() {
      // do not forget clear the interval timer
    clearInterval(this.timer);
  }
};
</script>

Answer 4

基于@ashishbansal 的回答

对于 vue js 2...注意我主要使用 ecma 脚本 6...如果你想使用旧的符号，你必须转换

现在已安装就绪

mounted() {
      let app = this;
      let distanceStartLoading = 300; //start loading stuff before reaching the very bottom right...

      var endOfPage = function endOfPage() {
            let bottomOfWindow = document.getElementsByTagName('body')[0].scrollTop + window.innerHeight >= document.documentElement.offsetHeight - distanceStartLoading;
            if (bottomOfWindow) {
              return true;
            } else {
              return false;
            }
          }
      ;(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("scrolling but not endofpage");
        if (endOfPage()) {
          console.log("hellow");
        }
        ;
      });

    },