您好,登錄后才能下訂單哦!
按照正常的產品邏輯,我們在進行頁面切換時滾動條應該是在頁面頂部的,可是。。。在使用vue-router進行頁面切換時,發現滾動條所處的位置被自動記錄了下來,且在另一個組件內定義的滾動監聽事件仍會運行,著實吃了一大驚。。。
說說我的破解方法:
1、在每個需要用vue-router切換的組件的mounted鉤子內將頁面的位置自動回滾到頁面頂部,解決滾動條位置自動記錄問題;
2、在每個組件內定義一條變量scrollWatch默認為true,在綁定滾動監聽事件時加個if判斷,只有在scrollWatch為true時進行監聽函數,然后在組件destroyed的鉤子內將變量scrollWatch設為false;這樣就解決了滾動監聽在別的組件內仍會運行的問題。
<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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。