項(xiàng)目中，因?yàn)閿?shù)據(jù)量過大，為提高頁面性能，采用頁面滑動(dòng) 滾動(dòng)條到底部的時(shí)候再進(jìn)行數(shù)據(jù)請求分頁，這邊給大給個(gè)核心，結(jié)合vue的生命周期用純javascript寫的一個(gè)監(jiān)聽函數(shù)

第一個(gè)我們需要知道幾個(gè)屬性值，判斷滾動(dòng)條是否已經(jīng)到達(dá)底部

滾動(dòng)條到頂部的位置：scrollTop
當(dāng)前窗口內(nèi)容可視區(qū)：windowHeight
滾動(dòng)條內(nèi)容的總高度：scrollHeight

//這里是觸發(fā)頁面滾動(dòng)事件函數(shù) window.onscroll = function()｛...｝

判斷到底部的等式為: scrollTop+windowHeight=scrollHeight;

//這個(gè)方法可以放在vue的某個(gè)要用的生命周期里使用 //如mounted() ... window.onscroll = function(){//變量scrollTop是滾動(dòng)條滾動(dòng)時(shí)，距離頂部的距離var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//變量windowHeight是可視區(qū)的高度var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//變量scrollHeight是滾動(dòng)條的總高度var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;//滾動(dòng)條到底部的條件if(scrollTop+windowHeight == scrollHeight){//到了這個(gè)就可以進(jìn)行業(yè)務(wù)邏輯加載后臺(tái)數(shù)據(jù)了console.log("到了底部");// window.onscroll = '' 用于解除綁定} }

總結(jié)

以上是生活随笔為你收集整理的纯js监听滚动条到底部（vue版）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。