vue切換頁(yè)面(路由)時(shí)如何保持滾動(dòng)條回到頂部
vue切換“頁(yè)面”(路由)時(shí)保持滾動(dòng)條回到頂部
vue項(xiàng)目做pc端的時(shí)候，發(fā)現(xiàn)在兩個(gè)頁(yè)面切換時(shí) 滾動(dòng)條沒(méi)有回到頂部而是保持原先的位置；
這是由于vue是單頁(yè)面應(yīng)用，只是更換了路由內(nèi)容，還在當(dāng)前頁(yè)面滾動(dòng)條是不會(huì)回到頂部的。
解決辦法是在切換路由的時(shí)候，將滾動(dòng)區(qū)域的滾動(dòng)條復(fù)位為0。
? // 使用 watch 監(jiān)聽(tīng)$router的變化,
? watch: {
? ? '$route': function(to, from) {
? ? document.body.scrollTop = 0
? ? ? document.documentElement.scrollTop = 0
? ? }
? }當(dāng)然看頁(yè)面的布局，可能滾動(dòng)區(qū)域并不是document的scrollTop為0 能有效果，和項(xiàng)目里面的布局滾動(dòng)區(qū)域有關(guān)，下面是項(xiàng)目里面的滾動(dòng)區(qū)域 app-main ；
<template> ? <div id="app"> ? ? <router-view /> ? ? <!-- 骨架屏，在菜單組件觸發(fā)隱藏，目前沒(méi)想到又好的方式處理 --> ? ? <common-skeleton v-if="showSkeleton" /> ? </div> </template>
<script>
import CommonSkeleton from './components/Skeleton/common'
export default {
? name: 'App',
? components: {
? ? CommonSkeleton
? },
? computed: {
? ? showSkeleton() {
? ? ? return this.$store.state.settings.showSkeleton
? ? }
? },
? watch: {
? ? '$route'(val) {
? ? ? if (!document.getElementsByClassName('app-main') || !document.getElementsByClassName('app-main').length) {
? ? ? ? return
? ? ? }
? ? ? document.getElementsByClassName('app-main')[0].scrollTop = 0
? ? }
? }
}
</script><style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
#app {
? width: 100%;
? height: 100%;
? @include clearfix;
}
</style>vue頁(yè)面跳轉(zhuǎn)后，滾動(dòng)條不在頂部的解決
問(wèn)題描述
vue在將頁(yè)面滾動(dòng)到頁(yè)面中部或者底部（反正不在頂部），再進(jìn)行頁(yè)面跳轉(zhuǎn)后，新頁(yè)面的滾動(dòng)條還處于上一個(gè)頁(yè)面的位置，并沒(méi)有更新到頁(yè)面頂部
解決方法
在全局路由鉤子里面將頁(yè)面滾動(dòng)到頁(yè)面頂部
router.beforeEach((to, from, next) => {
? ? document.body.scrollTop = 0;
? ? document.documentElement.scrollTop = 0;
?
? ? // 兼容IE
? ? window.scrollTo(0, 0);
? ? next();
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟
實(shí)際上在學(xué)習(xí)過(guò)程中,你會(huì)發(fā)現(xiàn)eslint檢查特別討厭,這個(gè)時(shí)候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11
vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能,結(jié)合實(shí)例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
Vue數(shù)據(jù)驅(qū)動(dòng)試圖的實(shí)現(xiàn)方法及原理
當(dāng)Vue實(shí)例中的數(shù)據(jù)（data）發(fā)生變化時(shí),與之相關(guān)聯(lián)的視圖（template）會(huì)自動(dòng)更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動(dòng)視圖是通過(guò)其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動(dòng)視圖實(shí)現(xiàn)的核心原理,需要的朋友可以參考下2024-10-10
關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問(wèn)題
這篇文章主要介紹了關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3使用深度選擇器修改樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文給大家介紹了vue項(xiàng)目中跨域問(wèn)題的完美解決方案，通過(guò)更改header，使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06