vue 切换页面(路由)时保持滚动条回到顶部
vue 切换“页面”(路由)时保持滚动条回到顶部vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置;这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的。解决办法是在切换路由的时候,将滚动区域的滚动条复位为0。// 使用 watch 监听$router的变化,watch: {'$route': function(to, from) {
·
vue 切换“页面”(路由)时保持滚动条回到顶部
vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置;
这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的。
解决办法是在切换路由的时候,将滚动区域的滚动条复位为0。
// 使用 watch 监听$router的变化,
watch: {
'$route': function(to, from) {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
当然看页面的布局,可能滚动区域并不是document的scrollTop为0 能有效果,和项目里面的布局滚动区域有关,下面是项目里面的滚动区域 app-main
;
<template>
<div id="app">
<router-view />
<!-- 骨架屏,在菜单组件触发隐藏,目前没想到又好的方式处理 -->
<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>
更多推荐
已为社区贡献21条内容
所有评论(0)