Home  >  Article  >  Web Front-end  >  How to implement scroller in vue to return to the page and remember the scroll position

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

亚连
亚连Original
2018-06-08 18:22:203204browse

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
}
}

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>

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()
}

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!

Statement:
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