vue3如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)
有的時(shí)候監(jiān)聽(tīng)的是window的滾動(dòng),有的時(shí)候是監(jiān)聽(tīng)元素的滾動(dòng)。
我們可以先創(chuàng)建一個(gè)hook。useScroll.js
import { onMounted,onUnmounted, ref } from 'vue' import { throttle } from 'underscore' export default function useScroll(elRef){ let el = window const isReachBottom = ref(false) const clientHeight = ref(0) const scrollTop = ref(0) const scrollHeight = ref(0) const scrollListenerHandler = throttle(() => { if(el === window){ clientHeight.value = document.documentElement.clientHeight scrollHeight.value = document.documentElement.scrollHeight scrollTop.value = document.documentElement.scrollTop }else { clientHeight.value = el.clientHeight scrollTop.value = el.scrollTop scrollHeight.value = el.scrollHeight } if(clientHeight.value + scrollTop.value >= scrollHeight.value){ // homeStore.fetchHouselistData() isReachBottom.value = true } }, 100) onMounted(()=> { if(elRef) { el = elRef.value } el.addEventListener("scroll", scrollListenerHandler) }) onUnmounted(()=>{ el.removeEventListener("scroll", scrollListenerHandler) }) return { isReachBottom, clientHeight, scrollTop, scrollHeight } }
可以傳入元素實(shí)例參數(shù)elRef,如果沒(méi)有傳入的話就初始化為window。
在掛載完成之后判斷是否傳入了元素實(shí)例elRef,如果有的話就使用元素實(shí)例,監(jiān)聽(tīng)元素的滾動(dòng)。
還需修改window還是元素滾動(dòng)的判定。
下面是使用這個(gè)hook的方法。
使用ref取到需要滾動(dòng)的元素實(shí)例。將取到的元素實(shí)例傳入到useScroll中。
使用useScroll這個(gè)hook,取出scrollTop的值進(jìn)行判斷。
總結(jié)
到此這篇關(guān)于vue3如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽(tīng)頁(yè)面滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue 2.5 Level E 發(fā)布了: 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中,我們將重點(diǎn)介紹一些更重要的的變化:更好的 TypeScript 集成,更好的錯(cuò)誤處理,更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無(wú)關(guān)的服務(wù)端渲染2017-10-10Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件
這篇文章主要介紹了Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vue-print-nb實(shí)現(xiàn)頁(yè)面打印功能實(shí)例(含分頁(yè)打印)
在項(xiàng)目中,有時(shí)需要打印頁(yè)面的表格,在網(wǎng)上找了一個(gè)打印組件vue-print-nb,用了還不錯(cuò),所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實(shí)現(xiàn)頁(yè)面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級(jí)表頭子列固定的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06Vue3使用defineAsyncComponent實(shí)現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過(guò)異步加載組件,可以減少初始加載時(shí)的資源體積,從而提升應(yīng)用的加載速度和用戶體驗(yàn),本文將詳細(xì)介紹如何使用 defineAsyncComponent 實(shí)現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05