VUE开发移动端上拉触底加载更多（分页、scroll）

一、首先先编写页面加载时、加载完成、没有数据的页面显示

<div v-if="showParts==true" style="display: flex;margin:.4rem 0;justify-content: center;align-items: center;">没有数据咯~~~</div>
	<div v-if="showParts=='no'">
	  	<van-loading size="24px" style="display: flex;margin:.4rem 0;justify-content: center;align-items: center;">加载中...</van-loading>
	</div>

二、编写js

先定义变量

data() {
	return {
        num:1,
        size：20,
        show:false,
        totalPage:'',
        qualityData:[]
    }
}

在编写js

created(){  //先在这里监听scroll事件
	window.addEventListener('scroll', this.onScroll)
},
//滚动触底加载
onScroll () {
    let innerHeight = document.querySelector('#app').clientHeight 
//这三个是获取窗口高度
    let outerHeight = document.documentElement.clientHeight
    let scrollTop = document.documentElement.scrollTop
	console.log(innerHeight + '-' + outerHeight + '-' + scrollTop)
	if (innerHeight<(outerHeight + scrollTop)) {
		if(this.totalPage>this.num){
		    this.num++;  //请求接口的第几页的页码
		    this.getData()  //请求接口的函数
		    this.show='no'
		}else{
		    this.show=true
	    }
	}
},
getData(){

	this.$reqGet('url?num='+this.num+'&size='+this.size).then(res=>{
	    let data=res.data.obj.records
	    for(var i=0;i<data.length;i++){
		    this.qualityData.push(data[i]);
	    }					 	
	    this.totalPage=res.data.obj.pages  //把接口里面的总页数赋值
	})
	this.show=false
},

获取高度的解释：

document.querySelector('#app').clientHeight是内容元素的总高度（翻页后高度也会随这个内容的加入而增加）

document.documentElement.scrollTop是获取滚动条的位置高度；

document.documentElement.clientHeight取得浏览器可见区域高度；