vue问题记录（十二）：跨页面，定位，scrollTop

最新推荐文章于 2024-10-05 01:25:51 发布

半夏ing

最新推荐文章于 2024-10-05 01:25:51 发布

阅读量778

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Fiona_lms/article/details/90168693

版权

vue 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

这几天一直在用h5写移动端的一个项目，然后就遇到跨页面定位的问题，
在这里插入图片描述
很明显，就是根据红色的标记的地方，然后进行跳转，然后进行定位，截图展示了发功机舱的定位

然后在网上查阅了一些资料，综合了自己的实际情况，如下

    mounted(){
        this.getCarInfo();
        this.$nextTick(() => {
            // 添加滚动事件
             window.addEventListener('scroll', this.scrollWindow)
         })
    },

        scrollWindow(){
                let type = this.$route.query.type;
                let total = '';
                if(type){
                    switch(type){
                        case "engine"://发动机舱
                            total = document.querySelectorAll("#engine")[0].offsetTop;
                            document.body.scrollTop = total
                            document.documentElement.scrollTop = total
                            window.pageYOffset = total;
                            window.removeEventListener('scroll', this.scrollWindow);
                        break;
                        case "cockpit"://驾驶舱
                            total = document.querySelectorAll("#cockpit")[0].offsetTop;
                            document.body.scrollTop = total
                            document.documentElement.scrollTop = total
                            window.pageYOffset = total;
                            window.removeEventListener('scroll', this.scrollWindow);
                        break;
                        case "start"://启动
                            total = document.querySelectorAll("#start")[0].offsetTop;
                            document.body.scrollTop = total;
                            document.documentElement.scrollTop = total;
                            window.pageYOffset = total;
                            window.removeEventListener('scroll', this.scrollWindow);
                        break;
                    }
                }
        },

注意
一开始的时候，我没有移除监听滚动事件，然后到达跳转的页面后，页面就无法滚动，后来，等我跳转到目的页面后，把监听滚动事件移除了，就没有问题了，。
别的也没什么好说的了，over