How to mark and record the scroll position in vue-scroller

This article mainly introduces the sample code for vue-scroller to record the scroll position. Now I share it with you 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 the api of vue-router and vue-scroller

2.beforeRouteEnter , it is impossible to access the vue instance through this, you need to use vm

3.setTimeout 0

When the version is released next week, I will post the link and you can experience the effect.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing paging in vue.js by clicking the page number to replace the page content

In the vue2.0 component How to implement value passing and communication

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

Use SpringMVC to solve vue cross-connection Domain request

Life cycle of Vue components and Route (detailed tutorial)

Implementing user permission control in Vue2.0

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