码迷,mamicode.com
首页 > 其他好文 > 详细

Vue详情页回列表页保存原数据与位置。

时间:2019-08-31 11:06:05      阅读:312      评论:0      收藏:0      [点我收藏+]

标签:执行   ted   back   bsp   time   code   set   class   for   

列表页关键代码

mounted() {
       
        //非从详情页返回时正常加载数据
        if (!this.$route.meta.isBack) {
            //执行加载数据的方法
           //重新加载页面
        } else {
            // this.onFetching = true;
            this.curPage = sessionStorage.getItem(‘curPage‘);
            //存储分页第几页,用于返回列表页继续可以分页
    
            ...
        }
        //执行完初始化isBack
        this.$route.meta.isBack = false 
    },
    beforeRouteLeave(to, from, next) {
        if(to.name == ‘bbs_detail‘) {
            //跳转为详情页,就保存当前滚动的页数
            sessionStorage.setItem(‘curPage‘, this.curPage);
        } else {
           //跳转为非详情页,滚动的页数归1
            sessionStorage.setItem(‘curPage‘, 1);
        }
        next();
    },

main.js

// 返回定位
router.afterEach((to,from) => {
    let path = to.path;
    //判断需要定位的路由地址
    if(path == ‘/bbs‘){
                //获取储存起来的位置
        let scrollTop = sessionStorage.getItem(‘scrollTop‘);
        if(scrollTop){
            setTimeout(()=>{
                //页面渲染完成后,在滚动,位置才是正确的,所以加个延迟
                document.getElementById(‘app‘).scrollTop = scrollTop; 
                sessionStorage.setItem(‘scrollTop‘,0);   //定位后还原储存位置信息
            },300)
        }
    }else{
        //除了特定地址,其他的都返回顶部
        
        sessionStorage.setItem(‘scrollTop‘, document.getElementById(‘app‘).scrollTop*1);//储存位置

        document.getElementById(‘app‘).scrollTop = 0; 
    }
})

 

Vue详情页回列表页保存原数据与位置。

标签:执行   ted   back   bsp   time   code   set   class   for   

原文地址:https://www.cnblogs.com/niubenbit/p/11437855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!