在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模式下,定位页面的滚动的距离。