在vue项目里面监听滚动条和在普通的HTML里面监听滚动条的做法是一样的,
1.首先需要知道三个值:滚动条距离div顶部的值、div自己的高度和撑开div内容的高度,分别对应我下面的变量是scrollTop、height、htmlHeight;
2.其次它和普通的HTML不同之处是,滚轮会随着内容的增加一直保持在页面底部,导致事件继续被执行,出现这个问题的原因是因为vue DOM渲染比较特别,不是数据发生变化之后 DOM 立即变化,而是生成虚拟DOM,然后再根据一定策略渲染页面,这时候你可能会在延迟setTimeout函数里面加上watch监听tableData里面的数据,但此时滚动条每次回滚后都会跳动一下,而且会回滚两次;这时候就需要用到$nextTick,$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 。代码如下:
mounted(){
// 注册scroll事件并监听
let self = this;
$(".div-table").scroll(function(){
self.loadMore();
})
},
methods:{
loadMore() {
let scrollTop = document.getElementsByClassName("div-table")[0].scrollTop;
let height = $(".div-table").height();
let htmlHeight = $(".table-loading").height()
//console.log(scrollTop + ',' + height + "," + scrollHeight)
if(scrollTop + height >= htmlHeight){
let start = this.tableData.length;
if(start >= 43){ //只要显示43行,超过43行就显示“没有更多数据 ”。
this.hasData = false;
return;
}
//下面是在模拟读取数据导致的数据变化
var arr = []
for(let i = start + 1; i < start + 10; i++) {
arr.push({
name: '王小虎',
gender:'男',
age:"17",
doctor:"素素",
department:"外科",
date: '2016-05-02',
money:"2000.45",
operation:"收费"
})
}
setTimeout(()=>{
this.tableData = this.tableData.concat(arr);
//let height = $(".div-table").scrollTop();
//var div = document.getElementsByClassName('div-table')[0];
//div.scrollTop = height
},1000)
}
}
},
watch:{
tableData:function(){
let height = $(".div-table").scrollTop();
this.$nextTick(() => {
var div = document.getElementsByClassName('div-table')[0];
div.scrollTop = height
})
}
}
希望对您有用!