vue監(jiān)聽scroll的坑的解決方法
更新時間：2017年09月07日 09:24:40 作者：weer0026
這篇文章主要介紹了vue監(jiān)聽scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個參考，希望給有同樣經(jīng)歷的人幫助
最近開始用vue寫個小項目，踩了不少坑，這里記錄下爬坑過程，給有同樣經(jīng)歷的人幫助。
問題
今天想在vue的項目里面用下拉加載，然后就直接寫了:
但是我發(fā)現(xiàn)我切換路由以后依舊其他頁面也觸發(fā)了scrollHandler函數(shù)，然后我想到使用了vue-router做的spa項目，window對象不變的，所以需要在每次使用后銷毀。
解決辦法
我回去看了下vue文檔的生命周期，看到了destroyed，然后直接在這個周期內銷毀就可以了。
使用throttle出現(xiàn)的新問題
下拉加載一般需要配合throttle限流函數(shù)(原理可以看這里)來避免頻繁觸發(fā)，所以優(yōu)化代碼成這樣：
然后發(fā)現(xiàn)沒法用removeEventListener了，因為這個函數(shù)第二個參數(shù)不接受匿名函數(shù)。
最后代碼
用一個變量中轉下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
這篇文章主要介紹了Vue v2.5 調整和更新不完全問題的相關資料,需要的朋友可以參考下2017-10-10
Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)
這篇文章主要介紹了Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解
這篇文章主要介紹了一款功能強大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會遇到需要實現(xiàn)拖拽功能的場景,而VueDraggablePlus正是為了解決這一痛點而誕生的,讓我們一起來看看它的特點和用法吧2024-03-03
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue路由的相關資料，文中講解非常細致，幫助大家更好的理解和學習vue路由知識，感興趣的朋友可以了解下2020-08-08
vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由
這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文通過實例代碼介紹對el-table表格的表頭操作方法,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03