vue之監(jiān)聽頁面是否以到底部
更新時間：2023年10月21日 09:21:44 作者：姥姥家的飯
這篇文章主要介紹了vue之監(jiān)聽頁面是否以到底部問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽頁面是否以到底部
項目中經(jīng)常用到上拉加載數(shù)據(jù)列表，平時使用組件庫可以快速的實現(xiàn)，整理一下原生寫法
思路
距離頂部的距離+ 可視區(qū)域高度 == 滾動條高度 如果成立說明已經(jīng)到頁面底部
獲取距離頂部的距離：
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
獲取可視區(qū)域高度：
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
獲取滾動條高度：
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
注意：在vue的created鉤子中使用
window.onscroll = function()｛…｝：觸發(fā)監(jiān)聽的函數(shù)
created(){
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
if(scrollTop+windowHeight==scrollHeight){
//寫后臺加載數(shù)據(jù)的函數(shù)
console.log("距頂部"+scrollTop+"可視區(qū)高度"+windowHeight+"滾動條總高度"+scrollHeight);
}
}
}
scroll滾動事件如何監(jiān)聽頁面是否滾動到底部
監(jiān)聽是否滾動到底部多數(shù)應(yīng)用在加載更多之類的功能。話不多說，直接上菜。
考慮vue渲染規(guī)則 需要在元素渲染后執(zhí)行scroll監(jiān)聽 否則獲取不到對應(yīng)dom節(jié)點
所以需要配合使用 $nextTick()
cont是監(jiān)聽區(qū)域，‘scroll’是添加事件，this.scroll是方法，div綁定ref="cont"。
mounted() {
this.$nextTick(()=>{
this.$refs.cont.addEventListener('scroll',this.scroll)
})
}scroll判斷是否到底部，如果到底了就可以請求數(shù)據(jù)或者其它操作。
scroll(e) {
let scrollTop = e.target.scrollTop; //滑入屏幕滾動條滾動時，距離頂部的距離
let windowHeitht = e.target.clientHeight; //能看到的頁面的高度
let scrollHeight = e.target.scrollHeight; //監(jiān)控的整個div的高度（包括現(xiàn)在看到的和上下隱藏起來看不到的）
let total = scrollTop + windowHeitht
if(total == scrollHeight){
console.log("到底了")
//加載操作
}else {
console.log("還沒有到底")
}
}如果沒有要加載數(shù)據(jù)了，就可以把scroll事件移除了，以免浪費性能。
this.$refs.cont.removeEventListener('scroll',this.scroll)注意：
一定給滾動的區(qū)域加高度和超出部分為滾動，不然不會觸發(fā)事件。
滾動區(qū)域class= "cont"。
.cont {
overflow: scroll;
width: 100%;
height: 677px;
}這就是事件監(jiān)聽是否滾動到底部的全部內(nèi)容了,其實并不難。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
當(dāng)el-select的disabled屬性為true的時候不展示“請選擇”字樣,如何去掉el-select 元素的 placeholder 屬性呢,下面小編通過示例代碼給大家分享el-select如何去掉placeholder屬性,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解如何實現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細，對我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
Vue3通過JSON渲染ElementPlus表單的流程步驟
這篇文章主要介紹了Vue3通過JSON渲染ElementPlus表單的流程步驟,文中通過代碼示例和圖文給大家講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用element-ui實現(xiàn)行合并過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
這篇文章主要為大家介紹了vue中多個文件下載實現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02