vue3如何監(jiān)聽頁面的滾動
更新時間：2023年07月03日 10:20:56 作者：至尊絕倫
這篇文章主要給大家介紹了關(guān)于vue3如何監(jiān)聽頁面的滾動的相關(guān)資料,在vue中實現(xiàn)滾動監(jiān)聽和原生js無太大差異,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
有的時候監(jiān)聽的是window的滾動，有的時候是監(jiān)聽元素的滾動。
我們可以先創(chuàng)建一個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ù)elRef，如果沒有傳入的話就初始化為window。
在掛載完成之后判斷是否傳入了元素實例elRef，如果有的話就使用元素實例，監(jiān)聽元素的滾動。
還需修改window還是元素滾動的判定。
下面是使用這個hook的方法。
使用ref取到需要滾動的元素實例。將取到的元素實例傳入到useScroll中。
使用useScroll這個hook，取出scrollTop的值進行判斷。
總結(jié)
到此這篇關(guān)于vue3如何監(jiān)聽頁面的滾動的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 2.5 Level E 發(fā)布了： 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關(guān)的服務(wù)端渲染2017-10-10
Vue3實現(xiàn)通過axios來讀取本地json文件
這篇文章主要介紹了Vue3實現(xiàn)通過axios來讀取本地json文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行
這篇文章主要介紹了詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實現(xiàn)頁面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08
本文主要介紹了element?表格多級表頭子列固定的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue3使用defineAsyncComponent實現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過異步加載組件,可以減少初始加載時的資源體積,從而提升應(yīng)用的加載速度和用戶體驗,本文將詳細介紹如何使用 defineAsyncComponent 實現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
element-ui 實現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細介紹了vue集成百度UEditor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要為大家詳細介紹了vue圖片加載與顯示默認圖片的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03