詳解使用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-axios 設(shè)置請(qǐng)求頭問(wèn)題
這篇文章主要介紹了Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題,文中給大家提到了axios設(shè)置請(qǐng)求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
vue實(shí)現(xiàn)web前端登錄頁(yè)數(shù)字驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web前端登錄頁(yè)數(shù)字驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項(xiàng)目后出現(xiàn)了錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問(wèn)題的解決辦法,需要的朋友可以參考下2023-02-02
vue3學(xué)習(xí)筆記簡(jiǎn)單封裝axios示例實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3學(xué)習(xí)筆記簡(jiǎn)單封裝axios示例實(shí)現(xiàn)，2022-06-06
vue中用 async/await 來(lái)處理異步操作
這篇文章主要介紹了vue中用 async/await 來(lái)處理異步操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式
vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)
Webpack是開(kāi)發(fā)Vue.js單頁(yè)應(yīng)用程序的重要工具。下面通過(guò)四種方式給大家介紹使用Webpack提高Vue.js應(yīng)用，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12