大家好，我本泽锅又来了，最近有个需求需要 一个界面，2个tab， 进入每个tab，点击进入详情，再返回到对应的tab，并且需要返回到浏览的位置。我是做的处理，先如图所示
image.png
1.首先处理两个tab的切换，点击进入详情，再返回到对应的tab，这个简单
在列表界面 借助 beforeRouteLeave 这个方法，记录路由离开的时候的tab
beforeRouteLeave(to, from, next) {
console.log('beforeRouteLeave',to);
setSession('allocationTab', this.selected);
next();
},
这里的setSession('allocationTab', this.selected); 是vuex 不懂的同学百度下
然后在界面 mounted() 方法里
mounted() {
if(getSession('allocationTab')){
this.selected = getSession('allocationTab')
}
this.getData(1);
},
这样就可以完美解决返回到对应的tab的问题
2.第二个就是解决记录滚动位置，再次返回时到之前浏览的位置
这里还是用到beforeRouteLeave这个方法
beforeRouteLeave (to, from, next) {
if (this.status = 1){
this.$refs.historyComp.recordCurrentTab();
}else {
this.$refs.workComp.recordCurrentTab();
}
setSession('allocationTab', this.selected);
next();
},
这里的 this.status = 1 记录的是当前切换的tab
this.$refs.historyComp.recordCurrentTab(); 是让列表的item记录当前滚动的位置
在item里的方法，首先要监听dom的滚动，然后在mountd方法里将每次的位置滑动动当前记录的位置
backScroll() {
console.log('backScroll', getSession('StoreList_' + this.status))
if (getSession('StoreList_' + this.status) && getSession('StoreList_' + this.status).pos > 0) {
setTimeout(() => {
document.getElementById('StoreList_' + this.status).scrollTop = getSession(
'StoreList_' + this.status).pos;
console.log('getElementById', getSession('StoreList_' + this.status).pos)
}, 500);
}
},
recordCurrentTab() {
console.log('StoreList_' + this.status, document.getElementById('StoreList_' + this.status).scrollTop);
setSession('StoreList_' + this.status, {
'pos': (document.getElementById('StoreList_' + this.status).scrollTop || 0)
});
},
