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