ElementUi进行tab页面跳转或切换并返回造成原页面滚动轴不能显示在历史位置

admin管理员组

文章数量:1531751

问题描述：原页面进行连接跳转或tab业切换并返回时滚动轴位置跑到最上面scrollTop值变为0问题

解决思路：利用变量进行缓存跳转之前页面的scrollTop并在返回页面的时候进行重新赋值

基本代码：

注：我这个页面是由index主页面做菜单，所以可以将scrollTop放到index页面属性中，没有的可以考虑缓存
1.el页面是动态生成的，在el-table标签元素上加上ref="table"，可以获取到具体标签元素
    var herefIn=null;
	var bodyWrapperST=null;
	var scrollTopTF=true;
	var herefInS=null;
	var bodyWrapperSTS=null;
	var scrollTopTFS=true;
	var statusScrollTop=0;
2.进行页面滚动轴的监听事件
            mounted() {
				// 监听滚动条的位置 
				this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
					let height =  res.target
					parent.bodyWrapperST= res.target
					this.scrollTop = height.scrollTop
					if(parent.scrollTopTF){
						parent.herefIn= height.scrollTop	
					}
				}, false)
				
				this.$refs.tableS.bodyWrapper.addEventListener('scroll', (res) => {
					let height =  res.target
					parent.bodyWrapperSTS= res.target
					this.scrollTopS = height.scrollTop
					if(parent.scrollTopTFS){
						parent.herefInS= height.scrollTop	
					}
				}, false)
			},
3.监听tab页面点击和关闭页面事件，进行赋值
    $(document).on("click",".layui-this",function(e){
		var BQName=e.target.innerText;
		//已完成
		if(statusScrollTop==2){
            //点击就会触发监听事件所以先设置成false不为herefIn赋值，保留历史位置值（不被重置）
			if(herefIn!=null&&bodyWrapperST!=null){
				if(BQName.indexOf("任务查询")>=0){
					scrollTopTF=false;
				}
			}
			setTimeout(() => {
			if(herefIn!=null&&bodyWrapperST!=null){
				BQName=e.target.innerText;
				if(BQName.indexOf("任务查询")>=0){
					var scrollTopBq=bodyWrapperST;
					scrollTopBq.scrollTop=herefIn;
					scrollTopTF=true;
				}
			}
			 },100);
		}else if(statusScrollTop==3){
			//执行失败
			if(herefInS!=null&&bodyWrapperSTS!=null){
				if(BQName.indexOf("任务查询")>=0){
					scrollTopTFS=false;
				}
			}
			setTimeout(() => {
			if(herefInS!=null&&bodyWrapperSTS!=null){
				BQName=e.target.innerText;
				if(BQName.indexOf("任务查询")>=0){
					var scrollTopBq=bodyWrapperSTS;
					scrollTopBq.scrollTop=herefInS;
					scrollTopTFS=true;
				}
			}
			 },100);
		}
	})
	
	$(document).on("click",".layui-tab-close",function(e){
		var BQName=$(".layui-this")[0].innerText;
		if(statusScrollTop==2){
			if(herefIn!=null&&bodyWrapperST!=null){
				if(BQName.indexOf("任务查询")>=0){
					scrollTopTF=false;
				}
			}
			setTimeout(() => {
			if(herefIn!=null&&bodyWrapperST!=null){
			BQName=$(".layui-this")[0].innerText;
			if(BQName.indexOf("任务查询")>=0){
				var scrollTopBq=bodyWrapperST;
				scrollTopBq.scrollTop=herefIn;
				console.log(herefIn)
				scrollTopTF=true;
			}
			}
			 },100);
		}else if(statusScrollTop==3){
			if(herefInS!=null&&bodyWrapperSTS!=null){
				if(BQName.indexOf("任务查询")>=0){
					scrollTopTFS=false;
				}
			}
			setTimeout(() => {
			if(herefInS!=null&&bodyWrapperSTS!=null){
			BQName=$(".layui-this")[0].innerText;
			if(BQName.indexOf("任务查询")>=0){
				var scrollTopBq=bodyWrapperSTS;
				scrollTopBq.scrollTop=herefInS;
				scrollTopTFS=true;
			}
			}
			 },100);
		}
		
	})
4.页面操作按钮进行页面跳转功能，进行历史herefIn的保存
                viewRwbg(index, row) {
					//已完成和执行失败
					if(row.status==2){
						parent.herefIn= this.scrollTop
						parent.scrollTopTF=false;
					}else if(row.status==3){
						parent.herefInS= this.scrollTopS
						parent.scrollTopTFS=false;
					}
					parent.herefIn= this.scrollTop
					parent.scrollTopTF=false;
					console.log(row.gk_taskid)
					parent.moni_rwbg(row.gk_taskid, row.djs_alerturl);
				},
5.大体思路如此，有些成员变量是此逻辑需要，大体功能可以实现，这里代码实现页面链接跳转和tab页面切换进行scrollTopS历史缓存

本文标签： 页面跳转位置历史ElementUi