vue keep-alive结合scrollTop返回上一页时记忆并且回到原来的滚动位置

Posted 2023-03-05 郝艳峰Vip

需求背景

---

再开发项目中总会遇到的一个需求就是，从商品详情页跳转回列表，希望记住原来列表页的搜索条件以及滚动条位置，看到这个需求第一想法就是使用keep-alive缓存列表页面就好了，但是实操发现，这个keep-alive只可以缓存页面的搜索条件，滚动条还是会跳到顶部，不满足需求，这个时候就要借助scroll-top了。

解决方案

在这之前不理解的同学可以先看一下vue官方文档的说明

第一步，如何使用keep-alive缓存页面

首先在项目入口页App.vue中，使用keep-alive缓存需要缓存的页面

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive :include="['hotelList','keepLiveOrder']">
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>

然后在需要缓存的.vue组件内命名与<keep-alive :include="['hotelList','keepLiveOrder']">中的所匹配

订单列表页list.vue

<script>
		export default 
					name:"keepLiveOrder",
			
</script>

这两步做完，列表页面已经缓存了，但是滚动条没有缓存。

第二步，缓存滚动条

思路就是在离开页面的时候缓存当前滚动条所在位置，然后再进入页面的时候将滚动条复原。

订单列表页list.vue

<script>
	export default 
		name:"keepLiveOrder",
		data()
			return
				selfScrollTop:'',
			
		,
		methods:
			clearAndHeavyload()
            	//do something 清空所有筛选条件重新发起请求
        	,
		,
		beforeRouteEnter(to, from, next) 
    		next((vm) => 
		        console.log(vm.selfScrollTop, '进入页面的滚动距离')
		        //此处就是进入页面时回到原有的滚动条位置
		        document.body.scrollTop = vm.selfScrollTop
		        $('.self-keeplive-list-aline').scrollTop(vm.selfScrollTop) 
		        //此处的代码是因为从列表页进入时，不能缓存，所以需要清掉所有条件，重新发起请求
			      if (from.name == "airline.index") 
			        vm.clearAndHeavyload();
			      
    		);
  		,
  		beforeRouteLeave(to, from, next) 
  			//离开页面时记住原来的滚动条高度
        	this.selfScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || $('.self-keeplive-list-aline').scrollTop()
        	console.log(this.selfScrollTop, '缓存离开页面的滚动距离')
        	next();
    	
	
</script>

结束语

至此，就可以做到从详情页面跳回列表页记住搜索条件并且记住滚动条距离
（也就是用户上次滑动到列表的位置）对用户体验还是很友好的。