admin 管理员组文章数量: 887007
问题描述：原页面进行连接跳转或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进行tab页面跳转或切换并返回造成原页面滚动轴不能显示在历史位置 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729930919h1371643.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论