heihei12305

介绍：vue的一个实现滚动加载的组件

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

参数解释：

• v-infinite-scroll="loadMore" 鼠标滚动之后要加载的方法
• infinite-scroll-disabled="busy" 需不需要禁用这个方法
• infinite-scroll-distance="10" 滚动距离，还有多少距离触发事件

模板

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