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

  • 内容
  • 评论
  • 相关

111.jpg

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;

      }

2222.jpg33333333.jpg

三、返回时取出并设置 scrollTop

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

    activated() {
      if(this.$refs.left1){
        this.$refs.left1.scrollTop = this.scroll_left1
        this.$refs.right1.scrollTop = this.scroll_right1
      }

    }

4444.jpg

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:Vue详情返回列表页记住滚动条位置并保持 - http://wlphp.com/?post=309

发表评论

电子邮件地址不会被公开。 必填项已用*标注