詳解使用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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項,結(jié)合實例形式詳細分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項,需要的朋友可以參考下2019-08-08
Vue實例的對象參數(shù)options的幾個常用選項詳解
今天小編就為大家分享一篇Vue實例的對象參數(shù)options的幾個常用選項詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決Vue + Echarts 使用markLine標線(precision精度問題)
這篇文章主要介紹了解決Vue + Echarts 使用markLine標線(precision精度問題)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
一文詳解vue各種權(quán)限控制與管理實現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue3.x 自發(fā)布以來,憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級功能,本文將和大家一起深入探索Vue3.x中的七大高級用法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue項目build后,圖片加載不出來的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3+el-table實現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時候,我們經(jīng)常會需要把文本數(shù)據(jù)的行與列進行轉(zhuǎn)換操作，這樣更方便查看，本文就詳細的介紹了vue3+el-table實現(xiàn)行列轉(zhuǎn)換，感興趣的可以了解一下2021-06-06
vue動態(tài)渲染svg、添加點擊事件的實現(xiàn)
這篇文章主要介紹了vue動態(tài)渲染svg、添加點擊事件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03