elementUI的v-infinite-scroll无限滚动的使用示例

本例是方便自己平时的使用，包含一些特殊的封装函数，需要对vue有一定的熟悉，同时我也做了一些说明。如初入门者，可忽略本篇。

原理

设置一个存放全部数据的总数组（如：xxxDataList），在滚动时利用滚动时的回调函数，不断往总数组添加新数据，这样总数组的数据越来越多，只要一直有新数据添加，就可以实现无限滚动的效果。

示例

html

	<div v-infinite-scoll="() => {  // 这个是滚动到底部时，会自动执行的回调函数
			if (loadMore){
				dataApi.page += 1
				dataApi.getData(dataApi.page)
			}
		}"
		class="infinite-scroll-div"
		style="max-height: 300px"
		:infinite-scoll-disabled="!loadMore"
	>
		<div v-for="(item, i) in xxxDataList"
			 :key="'xxxDataList-' + i"
		>{{ item.title }}</div>
		<div v-if="loadMore" style="color: #909399">加载中...</div>
		<div v-else style="color: #c0c4cc">{{ xxxDataList.length?'没有更多了':'暂无数据' }}</div>
	</div>
	 
	 <!-- 
	 dataApi是自定义封装的axios请求类，结果存储在dataApi.data中，
	 dataApi.page是页数变量，
	 dataApi.getData是获取数据方法，
	 请根据自身情况修改。
	 -->

js

data(){
	return {
		dataApi: new this.$utils.ModelJsSet(   // 自定义axios请求封装类，如果自己没有封装的，自己可以拆开实现html中绿色文字说明的效果即可
			UserManager,  //  自定义axios请求封装函数
			() => ({   // get请求基础params
				size: 10,
				...this.searchForm,
			}),
			(res, ins) => {   // get请求回调函数，res返回数据，ins封装类实例，在滚动时不断往结果列表添加数据，以实现无限滚动的效果
				if (ins.page === 1){
					this.xxxDataList = ins.data
				}else{
					this.xxxDataList = this.xxxDataList.concat(ins.data)
				}
			}
		),
		xxxDataList: [],
		searchForm: {   // 搜索值存放的对象，如没有可忽略
			text: null,
		}
	}
}
computed: {
	loadMore(){
		return (this.dataApi.total / this.dataApi.size) > this.dataApi.page
	}
}

css

	.infinite-scroll-div {
		overflow-x: hidden;
		overflow-y: scroll;
		fone-size: 13px;
	}