vue project keep alive returns to remember the scroll bar position

Keywords: Vue Mobile

Requirements: click the home page list to enter the secondary page, and keep the original position when returning.
Keep alive is a built-in component of Vue, which can keep the state in memory during component switching and prevent repeated rendering of DOM.

1:App.vue

<template>
    <div id="app">
        <!--Page return does not refresh-->
        <!-- // Pages that cache components jump to -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- // Non cache component jump page -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

2: router / index.js

export default new Router({
    routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          meta: {
            keepAlive: true // Cache required
          }
        },{
          path: '/home',
          name: 'home',
          component: Home,
          meta: {
            keepAlive: true // Cache required
          }
        },
        ...
       ]
       scrollBehavior(to, from, savedPosition) { //Solve the problem that multiple pages affect each other when dragging. When switching to a new route, you want the page to roll to the top
      // if (savedPosition) {
      //   return savedPosition
      // } else {
      //     if (from.meta.keepAlive) {
      //       from.meta.savedPosition = document.body.scrollHeight
      //     }
      //   }
        // return {
        //     x: 0,
        //     y: 0
        // }
    }
 })

3:home.vue
3.1: define the initial rolling height

data() {
    return {
        scrollY:0,
    }
},

3.2: note that the rolling element must be

.container

.container {
        position: absolute;
        top: 0;bottom: 0;
        width: 100%;
        padding: 0;margin:0;
        overflow: hidden;
        overflow-y: scroll;
    }

3.3: key points!! (not in methods)

//Record where you left
beforeRouteLeave (to, from, next) { 
     //Save scroll bar elements div Of scrollTop value
     this.scrollY = document.querySelector('.container').scrollTop
     // console.log(this.scrollY)    
    next()
 },
// by div Element reset saved scrollTop value
beforeRouteEnter (to, from, next) {
      next(vm => {  // vm = this
          document.querySelector('.container').scrollTop = vm.scrollY
          // console.log( document.querySelector('.container').scrollTop )
      })
},

I test the code on the mobile side: the pro test is effective. It is necessary to find out which element is rolling. Do not use winodow to monitor directly, but use rolling elements to monitor directly to monitor scrollTop

html:

<div class="newVipClass" >
< div class = "recordcontent" >
...
</div>
</div>

js:

data: {
    box: '',
    scrollY: ''
}

mounted: {
  // monitor scroll change
   this.$nextTick(()=>{
        this.box = document.querySelector('.recordContent')
        this.box.addEventListener('scroll', function(){
          this.scrollY = document.querySelector('.recordContent').scrollTop
          console.log("scrollY", this.scrollY)
        }, false)
      })   
},
beforeRouteEnter (to, from, next) {
      next(vm => {
        //Because before the hook is executed, the component instance has not been created
        // vm The current component instance is equivalent to the above this，So in next In this way, you can vm When this It's coming.
        console.log(vm);//Instance of current component
        if (from.name == 'monthCarApplyDetal' && to.name == "newMonthApply") {
          to.meta.title = "Edit monthly card application"
        }
        // by div Element reset saved scrollTop value
        document.querySelector('.recordContent').scrollTop = vm.scrollY 
      });
    },
    //Record where you left
    beforeRouteLeave (to, from, next) { 
        //Save scroll bar elements div Of scrollTop value
        this.scrollY = document.querySelector('.recordContent').scrollTop
        console.log('Where to save the scroll bar when leaving', this.scrollY)    
      next()
    },

What other good methods do you have? Welcome to share!!!

Posted by kundan on Sun, 17 May 2020 07:22:05 -0700

Programmer Group

vue project keep alive returns to remember the scroll bar position

Hot Keywords