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
	  })
  }
}) 
相关推荐
一条大祥脚6 分钟前
势能分析与势能线段树
开发语言·javascript·数据结构·算法
jarreyer6 分钟前
【AI编程】claudecode插件配置记录和trae软件相关配置
前端·chrome·ai编程
奔跑的web.6 分钟前
TypeScript 类型断言
前端·javascript·typescript
ヤ鬧鬧o.8 分钟前
HTML多倒计时管理
前端·javascript·css·html5
知兀9 分钟前
【uniapp/vue3+ts/js】eslint9+prettier+husky+lint-staged
前端·javascript·uni-app
小北方城市网13 分钟前
Spring Cloud Gateway 动态路由进阶:基于 Nacos 配置中心的热更新与版本管理
java·前端·javascript·网络·spring boot·后端·spring
码上出彩19 分钟前
H5+CSS3响应式设计实战:基于Flex布局的适配方案
前端·css·css3
wqwqweee20 分钟前
Flutter for OpenHarmony 看书管理记录App实战:关于我们实现
android·javascript·python·flutter·harmonyos
你说爱像云 要自在漂浮才美丽20 分钟前
【HTML5与CSS3】
前端·css3·html5
倪枫22 分钟前
CSS3——文本样式(字体样式和文本布局)
前端·css·css3