在项目中,比如首页较长是需要scroll的,进入到另一页面后,返回时默认在首页原来的位置

思路:
这个主要是vue监听滚动事件,监听到进入之前的滚动条并保存下来,切换回来时再取出来进行赋值就可以了。

步骤:
1)利用vue的@scroll事件对整个页面进行监听
2)保存滚动条的值用的是sessionstorage,这个最合适了,又能暂存下来,又可以随着浏览器的
关闭而清除掉
3)最后就是用钩子函数进行操作了:
离开组件时beforeRouteLeave(to, from, next)
进入组件时mounted或者beforeRouteEnter( to, from, next )都可以,
如果组件设置了缓存,那mounted是不会执行的,可以用activated

代码:

<div id="box" @scroll="getTop"></div>
<script src="text/javascript">
	export default {
		data(){
			return{
				boxTop: null,    // 要监听的scrollTop值
				}
		},
		mounted(){
			//  页面不缓存时写这里
		},
		activated(){
			//  设置缓存时写这里
			this.setTop()
		},
		beforeRouteLeave(to, from, next){
			this.saveData()
			next()
		},
		methods: {
			// 在盒子上的监听事件
			getTop(){
				 let box = document.getElementById(“box");
                  this.boxTop= box.scrollTop;
			},
			// 离开组件时调用   保存获得的值
			saveData(){
				sessionStorage.boxTop = this.boxTop;
			},
			// 进入组件时调用  设置当前页面的top值
			setTop (){
				let top = sessionStorage.boxTop;
                if (!top)  top = 0;           // 如果top值为undefined 或者null 或者本身就是0时 设置为0
                document.getElementById("box").scrollTop = top;
		}
		
	}
</script>
Logo

前往低代码交流专区

更多推荐