List
在list中监听scroll事件,每次保存该值到组件数据中,在组件被激活时,再次设置滚动条到上次记录的位置
该组件必须使用keep-alive缓存,否则只能使用vuex等状态管理插件保存页面位置信息
<template>
<div style="height: 200px;border: 2px solid #333;overflow-x: hidden;box-sizing: border-box;" @scroll="scroll">
<h1>
List
</h1>
<div v-for="i in arr" :key="i" style="height: 200px"> {{i}}</div>
</div>
</template>
<script>
export default {
name: "list",
data() {
return {
arr: [1, 2, 3, 4, 5],
pos: 0
}
},
methods: {
scroll(event) {
this.pos = event.target.scrollTop
console.log('scroll', event.target.scrollTop)
}
},
activated() {
this.$el.scrollTop = this.pos
},
beforeRouteEnter: (to, from, next) => {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
// console.log('before enter', this)
// let topy = document.body.scrollTop
//
// console.log(topy)
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log('route leave')
// let topy = document.body.scrollTop
let topy = window.scrollTop
console.log(topy, this.$el)
next()
},
}
</script>
<style scoped>
</style>
滚动条移动后,再次访问其他组件,然后返回来时,组件滚动条位置不变
也可以使用路由事件,只在路由移出和激活时进行赋值操作,比scroll会稍微效率高一点,注意beforeRouteEnter方法执行时,this尚未创建,不能使用,所以只能在激活时设置滚动条位置
activated() {
this.$el.scrollTop = this.pos
},
beforeRouteEnter: (to, from, next) => {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
// console.log('before enter', this)
// let topy = document.body.scrollTop
//
// console.log(topy)
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log('route leave')
// let topy = document.body.scrollTop
this.pos = this.$el.scrollTop
console.log(' this.pos ', this.pos )
next()
},