vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。
https://github.com/ElemeFE/vue-infinite-scroll/
https://www.npmjs.com/package/vue-infinite-scroll

安装

cnpm i vue-infinite-scroll -S

vue引用

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

使用

复制html到页面

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

其中…部分可以替换成加载中提示语或加载中图片。
在data中定义一个busy属性，对应的是html中infinite-scroll-disabled选项

data () {busy: false //是否正在加载过程中}

在methods中定义一个loadMore方法，对应的是html中v-infinite-scroll选项，当滚动到距离底部指定位置时触发的方法。

methods: {loadMore: function() {this.busy = true;//官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据setTimeout(() => {//这里请求接口去拿数据，实际应该是调用一个请求数据的方法this.busy = false;}, 1000);}}

html中可设置的选项：
- v-infinite-scroll
指定触发的方法

• infinite-scroll-distance
  指定滚动条距离底部多高时触发v-infinite-scroll指向的方法

• infinite-scroll-disabled
  等于true时代表正在执行加载，这时禁用滚动触发。

• infinite-scroll-immediate-check
  布尔值(默认值= true)。指令在绑定后立即检查，是否内容高度不足以填充页面容器。

• infinite-scroll-listen-for-event
  当vue实例触发事件时立即再次检查

• infinite-scroll-throttle-delay
  两次检查之间的时间间隔(默认值= 200)

注意

busy为true的时候代表正在执行加载，这时候滚动不会触发方法，但并不会隐藏标签中的内容，这个地方需要自己做处理。

要处理外层标签和加载中提示的显示问题

<div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"><span v-show="loadingShow">加载中</span></div>

1、处理外层标签<div v-infinite-scroll="loadMore" ...>的高度占位问题

.load-more-normal {text-align: center;height: 60px;line-height: 60px;}.load-more-hide {height: 0;}

定义一个loadMoreHide属性，当还有数据的时候，当还有下一页的时候用load-more-normal，没有下一页了就设为load-more-hide

if (this.pageNo >= totalPage) {this.busy = true //已经是最后一页了，不需要再触发滚动加载了this.loadMoreHide = true  //已经是最后一页了，不需要高度了
} else {this.busy = falsethis.loadMoreHide = false
}

2、处理加载中提示
定义一个loadingShow属性，当加载方法执行前设置为true，加载完毕即设置为false。

loadMore () {this.pageNo++this.busy = truethis.loadingShow = truesetTimeout(() => {this.getAjaxData(true)this.loadingShow = false}, 1000)}