当前位置: 首页 > news >正文

【js】vue获取document.getElementById(a)为null

需求

在菜单A页面点击某个元素携带id跳转到B详情页面,B页面获取该id元素的offsetTop, 并自动滚动到该元素处

问题

跳转到B详情页面, 在mounted获取到document.getElementById(a)为null, 因为整个详情页面是从后端获取来渲染的数据, 因此此时dom元素还未渲染出来, 所以拿到的是null, 但是尝试过以下两种办法均无效:

  1. this.$nextTick(function() {}) 在这里获取dom, 无效
  2. 在接口请求完成后再获取元素, 无效
  3. 在created请求接口, mounted获取元素, 无效
  mounted() {this.id = this.$route.params.id;let a = "section" + this.id;var top = document.getElementById(a).offsetTop;$(window).scrollTop(top + 300);$("#myNav").affix({offset: {top: 300}});},

解决

还是得用上计时器做点延迟才行…

  mounted() {setTimeout(() => {this.id = this.$route.params.id;let a = "section" + this.id;var top = document.getElementById(a).offsetTop;$(window).scrollTop(top + 300);$("#myNav").affix({offset: {top: 300}});var wow = new WOW();wow.init();}, 300);},
http://www.lryc.cn/news/216287.html

相关文章:

  • 系列六、Mybatis的一级缓存
  • 用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例
  • geoserver 的跨域问题怎么解决
  • SQL语法实践(一)
  • 路由器如何设置IP地址
  • 自动驾驶算法(一):Dijkstra算法讲解与代码实现
  • MS5910PA为行业内领先的可配置10bit到16bit分辨率的旋变数字转换器,可替代AD2S1210
  • Random指定随机种子遇到的坑
  • 2023云栖大会:属于开发者的狂欢
  • jsp 网上订餐Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • 优化大表分页查询性能:大表LIMIT 1000000, 10该怎么优化?
  • ubuntu PX4 vscode stlink debug设置
  • Flask的一种启动方式和三种托管方式
  • cudnn too short
  • 01、SpringBoot + MyBaits-Plus 集成微信支付 -->项目搭建
  • Linux 性能调优之网络优化
  • RT-Thread系统使用常见问题处理记录
  • 优先队列----数据结构
  • nginx项目部署教程
  • 资源限流 + 本地分布式多重锁——高并发性能挡板,隔绝无效流量请求
  • day52【子序列】300.最长递归子序列 674.最长连续递增序列 718.最长重复子数组
  • 计算机视觉 计算机视觉识别是什么?
  • Make.com实现多个APP应用的自动化的入门指南
  • LLMs之HFKR:HFKR(基于大语言模型实现异构知识融合的推荐算法)的简介、原理、性能、实现步骤、案例应用之详细攻略
  • 多模态 多引擎 超融合 新生态!2023亚信科技AntDB数据库8.0产品发布
  • elasticsearch无法访问9200端口
  • 【Linux】进程等待
  • 电视「沉浮录」:跌出家电“三大件”?
  • 前端实现调用打印机和小票打印(TSPL )功能
  • 串口通信(6)应用定时器中断+串口中断实现接收一串数据