vuejs在不使用history的情况下,回退返回到之前滚动的位置

  在vuejs里,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样(借用vuejs官方文档一句话);但是官方文档使用路由,来控制滚动行为是建立在HTML5 history模式下的(参考这里),但是本人最开始就没有使用这种模式,如果在修改项目的话,太耗时,想按现在这种非history的条件下,实现页面滚动位置的记录。

  其实最核心的就是记录滚动的位置,让后保存,在页面回退的时候,让页面滚动到指定位置即可。但是需要注意的钩子函数的时候。因为这里使用了keep-alive来缓存页面,所以第一次获取页面滚动的距离和第二次回退获取页面滚动的距离,写在了不同的钩子函数。

  下面是原型图:(因为这是pad上的,移动端样式有点问题)

                               

  上面的页面,有个无线加载的功能,我们这里怎么获取滚动的距离呢?在哪个钩子里实时的获取滚动的高度呢(内容区域可以滚动)?在初始化vue组件的时候,created,mounted这些钩子在页面渲染完后,就不会再触发了。我们获取页面的高度,也就是获取内容区域盒子的高度,在vuejs里我们通过使用 $ref 的方式来定位dom。在vuejs里还有钩子函数updated 是能实时的获取$ref 的高度,当页面dom更新的时候,就会触发updated这个钩子函数,具体参考vuejs官网;

  在updated 钩子函数里获取滚动的距离:

updated(){
      let scroll = this.$refs.list.scrollTop;
      sessionStorage.setItem(‘scroll‘,scroll);
}

 

   但是updated钩子只会在第一次进入的时候执行一次,因为该页面使用了keep-alive把页面缓存下来了,如果不清楚,请参考这里,那么以后怎么获取滚动的距离呢,虽然使用了keep-alive不会触发updated这个钩子函数,但是会触发activated,和deactivated 这两个钩子函数。activated这个钩子函数是返回页面就会加载,deactivated 这个钩子函数,在页面跳转前会触发,那么我们只要在页面跳转前获取到滚动的距离,然后缓存下来就可以了。

  在deactivated 钩子函数获取滚动的距离:

deactivated(){
      let scroll = this.$refs.list.scrollTop;
      sessionStorage.setItem(‘scroll‘,scroll); 
}

 

  和updated钩子函数获取的方式是一样的。但是我们不需要担心,回退后,就不会触发updated这个钩子函数了。

  这个时候,我们只需要在回退页面触发activated这个钩子函数,把滚动的位置赋值就可以了。(注意类型的转换,保存成string,要转化为number)

  在activated钩子函数赋值滚动的距离:

activated(){
      const scroll = sessionStorage.getItem(‘scroll‘);
      this.$refs.list.scrollTop = parseInt(scroll);
}

 

 这个只是尝试非history的模式下,采用缓存的方式获取页面的滚动。以后写个demo,写下关于histroy模式下,定位页面的滚动的距离。

vuejs在不使用history的情况下,回退返回到之前滚动的位置

原文地址:http://www.cnblogs.com/wxb-it/p/8025524.html

为您推荐

发表评论

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