html监听列表向上移动,前端——移动端监听页面滑动位置

最近做项目需要用到列表页进入到详情页后，返回来要记住列表滑动的位置。

在这里进行一个自我总结，以便日后使用：

1.router-view keepalive

2.点击详情页时获取并存储页面滑动位置scrollTop

3.返回列表页时赋值scrollTop

一、 关于 keepalive

keepalive 这部分可以看官方文档

需要注意的一点是当页面被设置为keepalive，它的生命周期钩子函数会改变

activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated

deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

一、 获取并存储页面滑动位置scrollTop

mounted(){

//获取滑动长度

let box = this.$refs.wrapperBox

box.addEventListener('scroll', () => {

let top = this.$refs.wrapperBox.scrollTop

console.log(top);

this.scTop = top

},false)

},

deactivated () {

//当页面被缓存且离开这个页面时候触发 把查询的高度保存到本地

window.localStorage.setItem('indexscTop', this.scTop);

},

三、 返回列表页时赋值scrollTop

activated(){

this.$refs.deviceListsBox.scrollTop=window.localStorage.getItem('indexscTop');

},