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

通过sessionStorage会话存储实现页面跳转之后返回到当前位置 (刷新跳回顶部)【2】

时间:2019-05-06 14:42:20      阅读:543      评论:0      收藏:0      [点我收藏+]

标签:无法   rem   tde   .com   center   har   数据   height   eve   

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>点击跳转返回当前点击的位置</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #app{
            width: 100%;
            height: 100%;
            background: pink;
            overflow: hidden;
        }
        a{
            display: block;
            width: 90%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            margin: 30px auto;
            border: 2px dashed red;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="app" @click="allSee">
        <a :href="href" v-for="item in list"> {{ item.title }} </a>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
     <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[],
                href:'https://www.baidu.com'
            },
            methods:{
                allSee(){
                    //点击获取高度
                    var scroll = document.documentElement.scrollTop || document.body.scrollTop;
                    sessionStorage.setItem('scroll',scroll)
                },
                //请求数据
                async getData(){
                    const {data} = await axios.post('https://bj.qhtest.site/byzz/v1.game_live/eventDetails',{mid:118303,type:'all',thirty:1,page:1})
                    if(data.Code == 200){
                        this.list = data.Data.list
                        this.getSession() //在数据请求成功之后获取session
                    }
                },
                //获取session
                getSession(){
                    // this.$nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
                    this.$nextTick(()=>{//这个需要延迟加载否则为0
                        var scrolltop = Number(sessionStorage.getItem('scroll'))
                        document.documentElement.scrollTop = document.body.scrollTop = scrolltop
                        //赋值成功之后要清除 否则 再次刷新无法回到顶部
                        sessionStorage.removeItem('scroll')
                    })
                }
            },
            created(){
                this.getData()
            },
//          mounted(){
//              this.getData()
//          },
        })
     </script>
</body>
</html>

通过sessionStorage会话存储实现页面跳转之后返回到当前位置 (刷新跳回顶部)【2】

标签:无法   rem   tde   .com   center   har   数据   height   eve   

原文地址:https://www.cnblogs.com/a-pupil/p/10819157.html

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