스크롤 위치를 기록하는 vue-scroller 코드 소개

이 글에서는 주로 스크롤 위치를 기록하기 위한 vue-scroller의 샘플 코드를 소개하고 있습니다. 내용이 꽤 괜찮아서 참고용으로 올려보겠습니다.

문제 설명:

목록 페이지가 세부 정보 페이지로 들어가거나 탭 페이지를 전환한 다음 이전 스크롤 위치로 전환되기를 바라며 목록 페이지로 돌아갑니다.

문제 해결 아이디어:

다른 페이지로 전환하기 전 위치를 기록하고, 목록 페이지로 돌아갈 때 해당 위치로 돌아갑니다. 이는 vue-router의 beforeRouteEnter 및 beforeRouteLeave 후크를 사용하여 달성해야 합니다.

또한 vue-scroller.min.js 소스에 너비와 높이가 0이 아니라는 판단을 추가합니다. 최근 코드 최적화 중에 발견된 구현 방법에 대한 설명을 참조하세요.

코드 부분:

beforeRouteEnter(to,from,next){

 if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置

  sessionStorage.askPositon = '';

  next();

 }else{

  next(vm => {

    if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this

     setTimeout(function () {

      vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false);

     },0)//同步转异步操作

    }

  })

 }

},

beforeRouteLeave(to,from,next){//记录离开时的位置

 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top;

 next()

},

주의 사항:

1. RouteEnter 전에는 vue 인스턴스에 액세스할 수 없습니다. vm을 사용해야 합니다

3.setTimeout 0

다음주 버전이 출시되면 효과를 경험해 보실 수 있도록 링크를 올려드리겠습니다

이상 내용이 이 글의 전체 내용이니 많은 도움이 되셨으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 사이트를 주목해주세요!

관련 권장 사항:

Angular에서 더 나은 스크롤 플러그인 사용 소개

Vue의 .sync 수정자 사용을 이해하는 방법

Vue 드래그 앤 드롭 구성 요소 개발 소개

위 내용은 스크롤 위치를 기록하는 vue-scroller 코드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!