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
	  })
  }
}) 
相关推荐
我有满天星辰9 分钟前
【前端模块化】前端模块化演进之路:从脚本堆砌到标准统一
前端
我有满天星辰14 分钟前
Vue 3 响应式双雄:ref 与 reactive 完全指南
前端·javascript·vue.js
随风一样自由9 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH9 小时前
HTML 的 <data> 元素
前端·html
YHHLAI10 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
weixin_BYSJ198710 小时前
SpringBoot + MySQL 乒乓球运动员信息管理系统项目实战--附源码04954
java·javascript·spring boot·python·django·flask·php
沪飘大军11 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
kyriewen12 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H12 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马12 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学