詳解使用vue-router進行頁面切換時滾動條位置與滾動監(jiān)聽事件
更新時間：2017年03月08日 16:35:01 作者：web_captian
本篇文章主要介紹了詳解使用vue-router進行頁面切換時滾動條位置與滾動監(jiān)聽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
按照正常的產(chǎn)品邏輯，我們在進行頁面切換時滾動條應該是在頁面頂部的，可是。。。在使用vue-router進行頁面切換時，發(fā)現(xiàn)滾動條所處的位置被自動記錄了下來，且在另一個組件內(nèi)定義的滾動監(jiān)聽事件仍會運行，著實吃了一大驚。。。
說說我的破解方法：
1、在每個需要用vue-router切換的組件的mounted鉤子內(nèi)將頁面的位置自動回滾到頁面頂部，解決滾動條位置自動記錄問題；
2、在每個組件內(nèi)定義一條變量scrollWatch默認為true，在綁定滾動監(jiān)聽事件時加個if判斷，只有在scrollWatch為true時進行監(jiān)聽函數(shù)，然后在組件destroyed的鉤子內(nèi)將變量scrollWatch設為false；這樣就解決了滾動監(jiān)聽在別的組件內(nèi)仍會運行的問題。
<script>
import $ from 'jquery';
export default {
data () {
return {
scrollWatch: true
}
},
mounted() {
$(window).scrollTop(0);
$(window).on('scroll', () => {
if (this.scrollWatch) {
//your code here
}
}
});
},
destroyed () {
this.scrollWatch = false;
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue-axios 設置請求頭問題,文中給大家提到了axios設置請求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)web前端登錄頁數(shù)字驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
vue-cli創(chuàng)建項目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項目后出現(xiàn)了錯誤,下面這篇文章主要給大家介紹了關于vue-cli創(chuàng)建項目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問題的解決辦法,需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了vue3學習筆記簡單封裝axios示例實現(xiàn)，2022-06-06
這篇文章主要介紹了vue中用 async/await 來處理異步操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue項目keepAlive配合vuex動態(tài)設置路由緩存方式
vue項目keepAlive配合vuex動態(tài)設置路由緩存方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決vue內(nèi)存溢出報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Webpack是開發(fā)Vue.js單頁應用程序的重要工具。下面通過四種方式給大家介紹使用Webpack提高Vue.js應用，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12