Home > Web Front-end > JS Tutorial > body text

How to implement scroller in vue to return to the page and remember the scroll position

亚连
Release: 2018-06-08 18:22:20
Original
3225 people have browsed it

This article mainly introduces the example code for vue scroller to return to the page and remember the scroll position. It is very good and has reference value. Friends in need can refer to

1, set keepAlive: whether Cache

router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}
Copy after login

2, set the rendering page

app.vue

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
Copy after login

3, record the scroll position and assign the value

beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == &#39;/&#39;){//当前页面刷新不需要切换位置
sessionStorage.askPositon = &#39;&#39;;
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement default style modification in elementui

How to define your own select based on ng-alain in angular Components?

How to build element-ui (detailed tutorial)

The above is the detailed content of How to implement scroller in vue to return to the page and remember the scroll position. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template