2019-12-11vue记录当前滚动列表位置，进入详情后再返回

大家好，我本泽锅又来了，最近有个需求需要 一个界面，2个tab， 进入每个tab，点击进入详情，再返回到对应的tab，并且需要返回到浏览的位置。我是做的处理，先如图所示

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)
                });
            },