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

发布于04月08日

我目前正在学习将laravel与vue相结合.此页面应该从服务器获取帖子数据，并显示在用户时间线中.我成功地获取了所有数据并显示出来.但我想在其中实现一个无限卷轴，但我不知道怎么做.我曾try 过很多不同的方法，但也不起作用.也许我对vue的了解还很 fresh .有什么建议吗？

这是我的原始代码:jsfiddle

下面是我试图用example实现无限滚动的代码.

jsfiddle 2

滚动符号正在显示，但似乎数组没有通过，数据仍然在同一时间出现.

一旦提交/feed，服务器将返回包含post信息的array.但我不知道如何进入列表array.

返回数组

在vue

途中

推荐答案

安装:

npm install vue-infinite-scroll --save

注册在你的主要网站上.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>

您可以 Select 以下组件:

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