vue之页面跳转滑动状态保存的实现

有这样的一个需求,在移动端H5的A页面滑动到某个位置时,这个时候跳转到B页面,在B页面进行返回到A页面,需要返回到上次A页面浏览的位置,这个需求相信很多小伙伴都遇到过,话不多说,上逻辑

分析一下实现逻辑

1.使用keep-alive进行页面缓存,关于keep-alive的介绍看一下Vue官方文档

2.在需要进行实现滑动状态保存的组件,对应滑动部分使用@scroll的方法获取当前页面滑动的距离

3.定义变量获取当前的距离$event.target.scrollTop

4.在当前组件使用activated生命周期钩子函数,为滑动模块指定滑动距离

注意:activated只能在keep-alive被激活才能使用

接下来就上代码

1.keep-alive,给需要进行缓存的组件进行缓存


keep-alive的设置

2.给需要实现滑动状态保存的组件,在对应的部分添加ref的属性,和scroll的事件


scroll事件

3.在该组件添加activated生命周期钩子函数,当前我们先要定义记录当前页面滑动位置的变量


关键代码

好了,结束,相信到这里,这个需要就可以完美的解决了!!!

欢迎留言,交流。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容