vue实现无限滚动

需求要求实现无限滚动，随手记一下。

网上找到这么一个插件 v-infinite-scroll 试了一下，可用。非常OK~

安装

npm install vue-infinite-scroll --save

使用

main.js

// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

vue 直接在需要无限滚动的标签上面加 v-infinite-scroll

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

这里其实我是伪懒加载哈哈哈哈哈哈哈

// 懒加载
async loadMore() {
	if (this.pageListFilter.length < this.pageList.length) {
		if (this.pageListIndex + 5 >= this.pageList.length) {
    	let arr = this.pageList.slice(this.pageListIndex, 	this.pageList.length);
    	this.pageListFilter = this.pageListFilter.concat(arr);
    	this.pageListIndex = this.pageList.length;
    	} else {
    		let arr = this.pageList.slice(this.pageListIndex, this.pageListIndex + 5);
    		this.pageListFilter = this.pageListFilter.concat(arr);
      	this.pageListIndex = this.pageListIndex + 5;
      }
  }
},

实际上是可以这样玩的

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