vue之監(jiān)聽頁面是否以到底部
更新時間：2023年10月21日 09:21:44 作者：姥姥家的飯
這篇文章主要介紹了vue之監(jiān)聽頁面是否以到底部問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽頁面是否以到底部
項目中經常用到上拉加載數據列表，平時使用組件庫可以快速的實現，整理一下原生寫法
思路
距離頂部的距離+ 可視區(qū)域高度 == 滾動條高度 如果成立說明已經到頁面底部
獲取距離頂部的距離：
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)聽的函數
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){
//寫后臺加載數據的函數
console.log("距頂部"+scrollTop+"可視區(qū)高度"+windowHeight+"滾動條總高度"+scrollHeight);
}
}
}
scroll滾動事件如何監(jiān)聽頁面是否滾動到底部
監(jiān)聽是否滾動到底部多數應用在加載更多之類的功能。話不多說，直接上菜。
考慮vue渲染規(guī)則 需要在元素渲染后執(zhí)行scroll監(jiān)聽 否則獲取不到對應dom節(jié)點
所以需要配合使用 $nextTick()
cont是監(jiān)聽區(qū)域，‘scroll’是添加事件，this.scroll是方法，div綁定ref="cont"。
mounted() {
this.$nextTick(()=>{
this.$refs.cont.addEventListener('scroll',this.scroll)
})
}scroll判斷是否到底部，如果到底了就可以請求數據或者其它操作。
scroll(e) {
let scrollTop = e.target.scrollTop; //滑入屏幕滾動條滾動時，距離頂部的距離
let windowHeitht = e.target.clientHeight; //能看到的頁面的高度
let scrollHeight = e.target.scrollHeight; //監(jiān)控的整個div的高度（包括現在看到的和上下隱藏起來看不到的）
let total = scrollTop + windowHeitht
if(total == scrollHeight){
console.log("到底了")
//加載操作
}else {
console.log("還沒有到底")
}
}如果沒有要加載數據了，就可以把scroll事件移除了，以免浪費性能。
this.$refs.cont.removeEventListener('scroll',this.scroll)注意：
一定給滾動的區(qū)域加高度和超出部分為滾動，不然不會觸發(fā)事件。
滾動區(qū)域class= "cont"。
.cont {
overflow: scroll;
width: 100%;
height: 677px;
}這就是事件監(jiān)聽是否滾動到底部的全部內容了,其實并不難。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue2.0 http請求以及l(fā)oading展示實例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
監(jiān)聽屬性可以針對某個屬性進行監(jiān)聽,當監(jiān)聽的屬性的值發(fā)生了變化,則會執(zhí)行相應的函數,下面這篇文章主要給大家介紹了關于Vue監(jiān)聽屬性的相關資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue請求函數和路由的安裝使用過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue router-link下劃線和顏色問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vant picker+popup 自定義三級聯動案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3 el-table 如何通過深度選擇器::v-deep修改組件內部樣式(默認樣式)
在Vue3中,通過使用深度選擇器::v-deep可以有效修改element-plus中el-table組件的內部樣式,這種方法允許開發(fā)者覆蓋默認的樣式,實現自定義的視覺效果,本文給大家介紹vue3 el-table 通過深度選擇器::v-deep修改組件內部樣式,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了Vue中對組件二開解決思路以及方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
elementui?Select選擇器嵌套tree實現TreeSelect方式
這篇文章主要介紹了elementui?Select選擇器嵌套tree實現TreeSelect方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了在vue中使用Echarts畫曲線圖的示例，幫助大家在vue中繪制圖表，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03