有这样的一个需求,在移动端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,给需要进行缓存的组件进行缓存
2.给需要实现滑动状态保存的组件,在对应的部分添加ref的属性,和scroll的事件
3.在该组件添加activated生命周期钩子函数,当前我们先要定义记录当前页面滑动位置的变量
好了,结束,相信到这里,这个需要就可以完美的解决了!!!
欢迎留言,交流。。。