vue監(jiān)聽(tīng)scroll的坑的解決方法
最近開(kāi)始用vue寫(xiě)個(gè)小項(xiàng)目，踩了不少坑，這里記錄下爬坑過(guò)程，給有同樣經(jīng)歷的人幫助。
問(wèn)題
今天想在vue的項(xiàng)目里面用下拉加載，然后就直接寫(xiě)了:
但是我發(fā)現(xiàn)我切換路由以后依舊其他頁(yè)面也觸發(fā)了scrollHandler函數(shù)，然后我想到使用了vue-router做的spa項(xiàng)目，window對(duì)象不變的，所以需要在每次使用后銷毀。
解決辦法
我回去看了下vue文檔的生命周期，看到了destroyed，然后直接在這個(gè)周期內(nèi)銷毀就可以了。
使用throttle出現(xiàn)的新問(wèn)題
下拉加載一般需要配合throttle限流函數(shù)(原理可以看這里)來(lái)避免頻繁觸發(fā)，所以優(yōu)化代碼成這樣：
然后發(fā)現(xiàn)沒(méi)法用removeEventListener了，因?yàn)檫@個(gè)函數(shù)第二個(gè)參數(shù)不接受匿名函數(shù)。
最后代碼
用一個(gè)變量中轉(zhuǎn)下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue項(xiàng)目嵌套iframe實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目嵌套iframe實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細(xì)，父組件傳值給子組件的方法，給大家介紹的也非常詳細(xì)，需要的朋友參考下吧2018-08-08
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue 組件高級(jí)用法,需要的朋友可以參考下2018-04-04
Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，感興趣的可以學(xué)一下2022-11-11
vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼
登錄注冊(cè)是最常用的網(wǎng)站功能,本文主要介紹了Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
這篇文章主要為大家詳細(xì)介紹了VUE Elemen-ui之穿梭框使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09