这几天一直在用h5写移动端的一个项目,然后就遇到跨页面定位的问题,
vue问题记录(十二):跨页面,定位,scrollTop
很明显,就是根据红色的标记的地方,然后进行跳转,然后进行定位,截图展示了发功机舱的定位
vue问题记录(十二):跨页面,定位,scrollTop

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

    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

相关文章:

  • 2021-10-20
  • 2022-12-23
  • 2021-08-06
  • 2021-08-26
  • 2023-03-03
  • 2021-08-05
  • 2021-06-13
  • 2022-12-23
猜你喜欢
  • 2022-01-13
  • 2021-12-01
  • 2021-04-08
  • 2022-02-20
  • 2021-07-27
  • 2022-12-23
  • 2021-05-01
相关资源
相似解决方案