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. vue-router 및 vue-scroller

2의 API를 숙지하세요. 이를 통해 vue 인스턴스에 액세스할 수 없습니다.

3. setTimeout 0 사용

다음 주에 버전이 출시되면 효과를 경험해 보실 수 있도록 링크를 게시하겠습니다

위 내용은 모두에게 도움이 되기를 바랍니다. .

관련 기사:

vue.js의 페이징에서 페이지 내용을 변경하려면 페이지 번호를 클릭하세요.

vue2.0 구성 요소에서 값 전달 및 통신을 구현하는 방법

webpack 4.0.0-beta. 0 버전의 새로운 기능(상세 튜토리얼)

SpringMVC를 사용하여 vue 도메인 간 요청 해결

Vue 구성 요소 및 Route의 수명 주기(상세 튜토리얼)

Vue2에서 사용자 권한 제어를 구현합니다. 0

위 내용은 vue-scroller에서 스크롤 위치를 표시하고 기록하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!