vue?@scroll監(jiān)聽滾動條事件方式
vue@scroll監(jiān)聽滾動條事件
為啥要使用@scroll監(jiān)聽滾動條事件沒用在vue.js開發(fā)前我們監(jiān)聽滾動條事件都是在window掛監(jiān)聽事件
例如：
window.onscroll=function
不是說vue.js不能這樣寫，只是這樣寫不好這些必須在這個(gè)頁面銷毀時(shí)清除這個(gè)事件不然的話就會在全局監(jiān)聽，用原生window監(jiān)聽可能是大家最熟悉的方法。
可vue.js給我提供了@scroll這個(gè)方法用來處理滾動條監(jiān)聽它不香嗎???
好了不多BB直接將上干貨
使用@scroll的幾個(gè)必要條件@scroll必須綁定在你要監(jiān)聽的盒子上且盒子必須寫高度，請注意了是必須寫高度若是想監(jiān)聽移動端滿屏建議高度直接寫100Vh讓后在css樣式上必須加上overflow:scroll;
這個(gè)是重點(diǎn)再說一遍是必須加上overflow:scroll;
大家可以看到我監(jiān)聽的是box1這個(gè)外出大盒子
下面是box1這個(gè)盒子的樣式前面也說到了overflow:scroll;
和高度是必須加的必然沒效果這里小編踩過很多坑特別是樣式的問題不然我也不會這么啰嗦
說完了html和css的問題 接下來就說@scroll這么怎么用吧 其實(shí)和@click以用 都是在后面接上一個(gè)方法
例如：
@scroll="handleScroll(event ) "
看到這里大家是不是感覺很熟悉了你要是問我為啥你就回去好好看看js吧看到了event 要是還不會 那就…
想不起來也沒關(guān)系 小編幫你回憶 在你綁定的函數(shù)必須傳一個(gè)實(shí)參
event不然你拿不到事件對象我這里綁定的函數(shù)是handleScroll函數(shù)里面定義的形參是e(接收傳過來的實(shí)參event)
既然拿到事件對象e了 你是不是就會了勒
我這里就寫一個(gè)小的案例吧 也是用的最多的監(jiān)聽滾動條是否到底
這是綁定函數(shù)代碼片段可以看到監(jiān)聽是否到底就是一個(gè)if的事e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight
解釋一下：
這個(gè)if 頂部距離+當(dāng)前滾動的高度>=滾動條的總高度這里一定不能寫 = 臨界值是很難觸發(fā)的一定不要給自己挖坑
沒辦法 條件有限 只能截代碼片段
但是我想這些片段應(yīng)該也足夠你入門@scroll事件了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法，通過實(shí)例講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了Vue 圖片壓縮并上傳至服務(wù)器功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動效果
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue style width a href動態(tài)拼接問題的解決
這篇文章主要介紹了vue style width a href動態(tài)拼接問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue父組件調(diào)用子組件方法報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue父組件調(diào)用子組件方法報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法
表格常用功能經(jīng)常有字段篩選、更多字段篩選彈框來過濾出我們所需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue3.x?的shallowReactive?與?shallowRef?使用場景分析
在Vue3.x中,`shallowReactive`和`shallowRef`是用于創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的API,它們與`reactive`和`ref`類似,本文介紹vue3.x??shallowReactive?與?shallowRef的使用場景,感興趣的朋友一起看看吧2025-02-02
本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04