在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
})
}
}
希望對您有用!