scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。就是下图中,54条数据的高度,但是因为有滚动条,所以屏幕看不到这么高
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。就是下图中红色框的高度
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。就是下图红色箭头的高度
scrollHeight-scrollTop-clientHeight=0,这个时候可以就是滚动条滚到底部的时候了。
在第一次请求数据的时候,先设置一个变量来记录请求次数(其实后台也是做分页的处理)
this.currentPage = 1,
$this = this;
this.$axios.fun().then(res=>{
$this.totalPage = res.totalPage; //这里需要知道总页数
$this.tableData = res.data;//表格数据
})
监听表格dom对象的滚动事件
let dom = document.querySelector(targetDom);
dom.addEventListener("scroll", function() {
const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
if(scrollDistance <=0){//等于0证明已经到底,可以请求接口
if($this.currentPage < $this.totalPage){//当前页数小于总页数就请求
$this.currentPage++;//当前页数自增
//请求接口的代码
$this.$axios.fun().then(res=>{
$this.tableData = $this.tableData.concat(res.data)//将请求回来的数据和当前展示的数据合并在一起
})
}
}
})
在vue项目中实现懒加载,可以自定义指令
main.js
/*自定义事件*/
Vue.directive('loadmore', {
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
//判断是否向下滚动
p = this.scrollTop;
// if ( t < p){down=true}else{down=false}
if(t < p){
down = true;
}else{
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign && down) {
binding.value()
}
})
}
})
组件内使用
v-loadmore="loadMore"
定义方法
//自定义表格滚动事件
loadMore(){
if (this.loadSign) {
this.loadSign = false
this.pageNumber++
setTimeout(() => {
this.loadSign = true
}, 1000)
console.log('到底了', this.pageNumber)
this.getLeftTable(this.pageNumber)//请求this.axios({
method: 'get',
url: this.$store.state.url + `/dataStatistics/historyInfo/${this.pageNumber}`,
}).then(res => {
if (res.data.code === 200) {
// 将请求下来的数据拼接到上一次
this.tableData = this.tableData.concat(res.data.data.resourceError)
}
});
}
},