詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽(tīng)事件
按照正常的產(chǎn)品邏輯，我們?cè)谶M(jìn)行頁(yè)面切換時(shí)滾動(dòng)條應(yīng)該是在頁(yè)面頂部的，可是。。。在使用vue-router進(jìn)行頁(yè)面切換時(shí)，發(fā)現(xiàn)滾動(dòng)條所處的位置被自動(dòng)記錄了下來(lái)，且在另一個(gè)組件內(nèi)定義的滾動(dòng)監(jiān)聽(tīng)事件仍會(huì)運(yùn)行，著實(shí)吃了一大驚。。。
說(shuō)說(shuō)我的破解方法：
1、在每個(gè)需要用vue-router切換的組件的mounted鉤子內(nèi)將頁(yè)面的位置自動(dòng)回滾到頁(yè)面頂部，解決滾動(dòng)條位置自動(dòng)記錄問(wèn)題；
2、在每個(gè)組件內(nèi)定義一條變量scrollWatch默認(rèn)為true，在綁定滾動(dòng)監(jiān)聽(tīng)事件時(shí)加個(gè)if判斷，只有在scrollWatch為true時(shí)進(jìn)行監(jiān)聽(tīng)函數(shù)，然后在組件destroyed的鉤子內(nèi)將變量scrollWatch設(shè)為false；這樣就解決了滾動(dòng)監(jiān)聽(tīng)在別的組件內(nèi)仍會(huì)運(yùn)行的問(wèn)題。
<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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
vue-router兩種模式區(qū)別及使用注意事項(xiàng)詳解
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項(xiàng),結(jié)合實(shí)例形式詳細(xì)分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
今天小編就為大家分享一篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決Vue + Echarts 使用markLine標(biāo)線(precision精度問(wèn)題)
這篇文章主要介紹了解決Vue + Echarts 使用markLine標(biāo)線(precision精度問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
一文詳解vue各種權(quán)限控制與管理實(shí)現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實(shí)現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue3.x 自發(fā)布以來(lái),憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開(kāi)發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級(jí)功能,本文將和大家一起深入探索Vue3.x中的七大高級(jí)用法,需要的朋友可以參考下2024-03-03
Vue項(xiàng)目build后,圖片加載不出來(lái)的解決
這篇文章主要介紹了Vue項(xiàng)目build后,圖片加載不出來(lái)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時(shí)候,我們經(jīng)常會(huì)需要把文本數(shù)據(jù)的行與列進(jìn)行轉(zhuǎn)換操作，這樣更方便查看，本文就詳細(xì)的介紹了vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換，感興趣的可以了解一下2021-06-06
vue動(dòng)態(tài)渲染svg、添加點(diǎn)擊事件的實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)渲染svg、添加點(diǎn)擊事件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03