Introduction to the code for vue-scroller to record the scroll position

This article mainly introduces the sample code for vue-scroller to record the scroll position. The content is quite good. I will share it with you now and give it as a reference.

Problem description:

The list page enters the details page, or switches the tab page, and then returns to the list page, hoping to switch to the previous scroll position

Solution to the problem:

Record the position before switching to other pages, and return to the position when returning to the list page. This needs to be achieved with the help of vue-router's beforeRouteEnter and beforeRouteLeave hooks.

There is also a simpler and more crude method. Add a judgment that the width and height are not zero in the vue-scroller.min.js source code. See the comments for the implementation method, which was discovered during recent code optimization.

Code part:

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

},

Points to note:

1. Familiar with vue-router and vue -Scroller's api

2.beforeRouteEnter, you cannot access the vue instance through this, you need to use vm

3.setTimeout 0

Wait a moment When the weekly version is released, I will post a link so you can experience the effect

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the method of using the better-scroll plug-in in Angular

How to understand Vue’s .sync modification The use of symbols

Introduction to the development of Vue drag and drop components

##

The above is the detailed content of Introduction to the code for vue-scroller to record the scroll position. For more information, please follow other related articles on the PHP Chinese website!