VUE 实现下拉分页加载更多功能

	<div class="con_item" v-for="item in pageArr">
		<div class="name" >{{item.name}}</div>
	</div>
	<div class="loading" style="display: none" ref="loading">
		<img src="../assets/loading.gif" >
		<span>正在加载更多数据</span>
	</div>
	<div class="text" style="display: none" ref="text">
		<span>没有更多数据啦</span>
	</div>

js

data(){return{pageNum:1,propertyData:'',totalnum:'',pageArr:[],}},
//滚动事件监听处理	
mounted(){
	window.addEventListener('scroll',this.handleScroll)
},

//滚动事件监听处理	
handleScroll(){		
//是否滚动到底部判断
if((document.documentElement.scrollTop+window.innerHeight)==document.body.offsetHeight){
	this.getpageData()
	}},
	}
	//请求列表数据
async getApiData(){
				var that=this;
				let proData= await API.ajaxGet(url,{
					'pageNum':this.pageNum,
					'pageSize':10
				})
				that.propertyData=proData.data.data.resultList
				that.totalnum=proData.data.data.pages
				把每次请求的数据放入一个数组里
				that.propertyData.forEach((item)=>{
					that.pageArr.push(item)
				})
			},
		//判断pageNum的值，并显示加载符号
	getpageData(){
				var that=this		
				if(that.pageNum<this.totalnum){					
					that.$refs.loading.style.display="block"
					that.pageNum++
					setTimeout(function(){
						that.getApiData()
					},1000)
				}else{
					setTimeout(function(){
						that.$refs.loading.style.display="none"
						that.$refs.text.style.display="block"
					},5000)					
				}				
			},