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
	  })
  }
}) 
相关推荐
哆啦A梦158812 分钟前
Vue3魔法手册 作者 张天禹 08_回顾TS中的-接口-泛型-自定义事件
前端·vue.js·typescript
星火开发设计18 分钟前
序列式容器:list 双向链表的特性与用法
开发语言·前端·数据结构·数据库·c++·链表·list
PieroPc21 分钟前
2026年,我的AI编程助手使用心得(纯个人体验,非评测)
javascript·css·html·fastapi·ai编程
014-code24 分钟前
ESLint 详解
前端·eslint
xjf771125 分钟前
TypDom框架分析
javascript·typescript·前端框架·typedom
GISer_Jing35 分钟前
前端营销I(From AIGC)
前端·aigc·ai编程
明月_清风42 分钟前
向 Native 借力:深度拆解 SIMD 加速与 Node.js 异步原生解析
前端·json
明月_清风1 小时前
无感监控:深度拆解监控 SDK 的性能平衡术与调度策略
前端·监控
键盘鼓手苏苏3 小时前
Flutter for OpenHarmony:markdown 纯 Dart 解析引擎(将文本转化为结构化 HTML/UI) 深度解析与鸿蒙适配指南
前端·网络·算法·flutter·ui·html·harmonyos
芭拉拉小魔仙9 小时前
企业级Vue项目的状态管理:从原理到实战架构
前端·vue.js·架构