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
	  })
  }
}) 
相关推荐
00后程序员张19 分钟前
iOS 上架费用全解析 开发者账号、App 审核、工具使用与开心上架(Appuploader)免 Mac 成本优化指南
android·macos·ios·小程序·uni-app·cocoa·iphone
JIngJaneIL40 分钟前
助农惠农服务平台|助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·助农惠农服务平台
云外天ノ☼1 小时前
待办事项全栈实现:Vue3 + Node.js (Koa) + MySQL深度整合,构建生产级任务管理系统的技术实践
前端·数据库·vue.js·mysql·vue3·koa·jwt认证
gihigo19981 小时前
使用JavaScript和Node.js构建简单的RESTful API
javascript·node.js·restful
一位搞嵌入式的 genius1 小时前
前端实战开发(三):Vue+Pinia中三大核心问题解决方案!!!
前端·javascript·vue.js·前端实战
塞纳河畔的歌1 小时前
保姆级教程 | 麒麟系统安装Edge浏览器
前端·edge
前端.火鸡1 小时前
Vue 3.5 新API解析:响应式革命、SSR黑科技与开发体验飞跃
javascript·vue.js·科技
多睡觉觉1 小时前
数据字典:从"猜谜游戏"到"优雅编程"的奇幻之旅
前端
嗝屁小孩纸1 小时前
开发集成热门小游戏(vue+js)
前端·javascript·vue.js
赛博切图仔1 小时前
深入理解 package.json:前端项目的 “身份证“
前端·javascript