페이지로 돌아가서 스크롤 위치를 기억하기 위해 vue에서 스크롤러를 구현하는 방법

이 글에서는 스크롤 위치를 기억하기 위해 페이지를 반환하는 vue 스크롤러의 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.

1, keepAlive 설정: 캐시 여부

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

2, 렌더링 페이지 설정

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, 스크롤 위치 기록 및 값 할당

beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
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()
}

위는 모두를 위해 편집한 내용입니다. 모두에게 도움이 되기를 바랍니다. 미래에.

관련 기사:

elementui에서 기본 스타일 수정을 구현하는 방법

Angular에서 ng-alain을 기반으로 고유한 선택 구성 요소를 정의하는 방법은 무엇입니까?

element-ui 구축 방법(자세한 튜토리얼)

위 내용은 페이지로 돌아가서 스크롤 위치를 기억하기 위해 vue에서 스크롤러를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!