uni-app获取元素具体位置获取失败

场景:想要通过链接跳转传递catid&catid2类别id,商品类别id 跳到这一页左侧对应的类别栏上面,同时跳到右侧列表滚动到对应商品那一块区域。

遇到的问题:在for循环中通过绑定id获取不到商品列表的具体位置。

原因:在onReady函数和mounted函数中没有获取到接口返回的数据,所以id那会还没渲染上。

解决方法:id换成ref,在接口返回成功的then函数中,使用$nextTick函数获取元素。

在for循环绑定ref的时候,获取ref需要加上[0]

复制代码
then(() => {
	 if (this.secondId2) {
	  this.$nextTick(() => {
	      let cid = this.secondId2
	      const node = this.$refs[cid][0]
	      this.scrollTop = node.$el.offsetTop
	  })
  }
}) 
相关推荐
lolo大魔王1 分钟前
Go 语言 Web 框架 Gin 入门详解
前端·golang·gin
喵个咪15 分钟前
一套Schema,生成全部代码|Kratos高效开发新范式
前端·后端·架构
Dewyze同学19 分钟前
我用 Cursor 三天从零到可上线:uni-app + Fastify 全栈小程序复盘
前端
qq_3813385024 分钟前
前端虚拟列表与无限滚动性能优化实战:从万级数据到丝滑体验
前端·javascript·html·优化
hexu_blog28 分钟前
前端vue后端springboot如何实现图片格式转换
前端·javascript·vue.js
代码煮茶28 分钟前
Vue3 项目规范实战 | ESLint+Prettier+Git Hooks 搭建前端代码规范体系
前端·javascript·vue.js
米丘29 分钟前
新一代代码格式化工具 Oxfmt/Oxlint
前端·rust·前端工程化
韭菜炒大葱37 分钟前
讲讲 浏览器的缓存机制
前端·面试·浏览器
AI砖家39 分钟前
DeepSeek TUI 保姆级安装配置全指南 -Windows||macOS双平台全覆盖
服务器·前端·人工智能·windows·macos·ai编程·策略模式
游戏开发爱好者841 分钟前
iOS应用性能监控:Pre-Main与Main函数耗时分析及Time Profiler使用教程
android·ios·小程序·https·uni-app·iphone·webview