使用vue-infinite-scroll实现无限滚动加载

安装

npm i vue-infinite-scroll -D

引入

有两种方式，一个是全局，一个是在单个组件中引入，我采用的是后者

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

//单个组件
import infiniteScroll from 'vue-infinite-scroll'
export default {
	directives: { infiniteScroll }
}

使用

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
	<!---loading及无数据的效果--->
  <div v-loading="!busy" class="loading"/>
  <div v-if="listData.length ===0 " style="text-align: center">暂无数据</div>
</div>
<script>
	import infiniteScroll from 'vue-infinite-scroll'
	export default {
		 directives: { infiniteScroll },
		 data() {
			return {
				busy: true,
				listData: [],
				listQuery: {
			        currentPage: 0,
			        pageSize: 10
			    },
			}
		}，
		methods: {
			getList(flag) {
   			  var _this = this
		      fetchList(this.listQuery).then(function(res) {
		        if (res.code === 0) {
		          if (flag) {
		          	//flag为true时 拼接数组
		            _this.listData = _this.listData.concat(res.payload.list)
		            //若当前页已经是最后一页，将busy设置为true，不再执行loadMore，否则设置为false
		            if (_this.listQuery.currentPage + 1 >= res.payload.totalPages) {
		              _this.busy = true
		            } else {
		              _this.busy = false
		            }
		          } else {
		            _this.listData = res.payload.list
		            _this.busy = false   
		            if (res.payload.list.length === 0 || res.payload.totalPages === 1) {
		            //若无数据（接口返回list长度为0）或只有一页数据（接口返回字段totalPages为1），将busy设置为true，不再执行loadMore
		              _this.busy = true
		            }
		          }
		        }
		      })
    		},
		    loadMore() {
		      this.busy = true
		      setTimeout(() => {
		        this.listQuery.currentPage++
		        this.getList(true)
		      }, 500)
		    },
		}
	}
</script>

1. busy的值为true就不再加载，为false时持续加载
2. infinite-scroll-distance=“10” 表示距离底部10时就触发loadMore方法
3. 在getList方法中传入一个参数flag，判断是否拼接函数，
4. fetchList是封装的axios get请求，项目采用后台分页，listQuery是分页参数，其中currentPage（从0开始）代表当前页数；pageSize代表一页显示条数