keep-alive的activated，deactivated钩子，及列表scrollTop值存储，返回时还在该位置 - gang456789的博客 - CSDN博客

先了解下keep-alive的一些内容：
但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能：

<template>
  <div class="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
created: function () {
      console.log(1)
    },
    mounted: function () {
      console.log(2)
    },
    activated: function () {
      console.log(3)
    },
    deactivated: function () {
      console.log(4)
    }

页面生命周期钩子如上面的代码所示，这四个是最常用到的部分。这部分需要注意下，当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

我们知道keep-alive之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。
上面提到activated和deactivated的钩子，并作出了解释，下面我们实现一个小功能；
需求：在vue项目中，如果我们当前在一个类似新闻列表的页面，当我们向下滑到100页，然后点击进入某个新闻详情，当我们看结束之后后退，但是我们发现，返回后页面又返回到第一页了，想想这时用户的感受，所以我们要解决这个问题，让该页面保存住跳转之前的scrollTop值，然后饭后后将这个值赋给当前页面，这样问题就完美解决了，下面上代码
首先是keep-alive缓存，这里需要我们需要缓存的是几级路由，我这里是一级路由

<keep-alive>
      <router-view></router-view>
</keep-alive>

下面是我们目标页面代码的实现

activated () {
      // 这里的document.body.scrollTop需要写兼容性问题
      if (document.body.scrollTop) {
        document.body.scrollTop = sessionStorage.getItem('roll')
      } else {
        document.documentElement.scrollTop = sessionStorage.getItem('roll')
      }
//      scrollTop = sessionStorage.getItem('roll')
//      $('html, body').animate({scrollTop: asd}, 500)
      window.addEventListener('scroll', this.roll)
    },
    deactivated () {
      sessionStorage.setItem('roll', this.top)
      console.log(sessionStorage.getItem('roll'))
      window.removeEventListener('scroll', this.roll)
    },

上面的思路是当我们离开时用sessionStorage.setItem(‘roll’, this.top)记录一下scrollTop值，这里需要注意window.removeEventListener(‘scroll’, this.roll)这句一定要写，用来取消scroll监听事件，如果不取消，它会继续监听下个页面的scrollTop值，这时的scrollTop就不是我们想要的了。
上面的activated里面的scrollTop，我这里写了兼容，如果你们的电脑不写兼容不报错，你们页可以不写。
监听的roll函数写在methods中

roll () {
        this.top = document.body.scrollTop || document.documentElement.scrollTop
      }

以上就是解决方案，完

Original url: Access
Created at: 2019-03-28 19:43:30
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论