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

问题描述:原页面进行连接跳转或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历史缓存

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值