Vue详情返回列表页记住滚动条位置并保持

1.给 router-view 添加 keep-alive

2.获取并存储当前 scrollTop

3.返回时取出并设置 scrollTop

一、给 router-view 添加 keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。所以在由详情页返回列表页时，不让列表页刷新。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

二、获取并存储当前 scrollTop

       <div class="left1" :style="`width:${config_info['left_width']}%;`"  ref="left1" v-on:scroll="scroll_left()">

         <div class="nav" v-for="(item,index) in catList" :key="index" style="text-align: center;">

           <p style="font-size: 0.825rem;" :class="{'leftcolorchange':leftcolordisplay==index,cate1:1}"

             @click="getList(item.id,item.type,index)">

             {{item.name}}

           </p>

         </div>

       </div>

     scroll_left() {

       let scroll_left1 = this.$refs.left1.scrollTop

       //console.log(scroll_left1);

       //存储 scrollTop 的值

       this.scroll_left1 = scroll_left1;

     },

     scroll_right() {

       let scroll_right1 = this.$refs.right1.scrollTop

       //console.log(scroll_right1);

       //存储 scrollTop 的值

       this.scroll_right1 = scroll_right1;

     }

三、返回时取出并设置 scrollTop

上面已经介绍过了，使用 keep-alive 之后，每次返回页面会调用 activated 生命周期方法，所以在这个方法里设置之前记住的 scrollTop，达到记住滚动位置的效果。

   activated() {

     if(this.$refs.left1){

       this.$refs.left1.scrollTop = this.scroll_left1

       this.$refs.right1.scrollTop = this.scroll_right1

     }

   }