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

news2024/11/28 12:34:21

场景:想要通过链接跳转传递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
	  })
  }
}) 

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1028466.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java】医院智能导诊系统源码:解决患者盲目就诊问题、降低患者挂错号比例

医院智能导诊系统解决患者盲目就诊问题,减轻分诊工作压力。降低患者挂错号比例,优化患者就诊流程,有效提高线上线下医疗机构接诊效率。患者可通过人体画像选择症状部位,了解对应病症信息和推荐就医科室。 一、医院智能导诊系统概述…

科锐逆向第二阶段(一)SDK

基本概念 什么是 SDK SDK 是软件开发工具包(Software Development Kit)的缩写。它是一个集成了软件开发所需工具、库文件、示例代码和文档等资源的软件包。 SDK 通常由软件开发公司或平台提供,旨在帮助开发人员构建、测试和部署特定类型的…

Offset Explorer(Kafka消息可视化工具)报invalid hex digit ‘{‘错误解决方法

解决办法: 根据代码的实际情况,设置成对应的值。设置完成后点update、refresh更新。

excel 通过SUMIF关键词统计词频

经常会对句子中含有的某些词汇数量进行统计,excel 也可以实现初级的操作 比如有如下文本 想要统计旅游和好两个词在这些文本中出现了多少次 用如下函数即可 SUMIF(A:A,"*"&C2&"*",B:B) 可以很方便的统计出好出现了3次数据&#xff0…

Python爬虫有哪些库,分别怎么用

目录 Python常用爬虫库 代码示例 requests BeautifulSoup Scrapy Selenium PyQuery Axios requests-html pyppeteer 总结 Python是一种非常流行的编程语言,因其易学易用和广泛的应用而受到开发者的喜爱。在Python中,有许多库可以用于爬虫程序…

“探索前后端分离架构下的Vue.js应用开发“

目录 引言1. 前后端分离2. Vue的简介1. Vue.js是什么?2. 库和框架的区别3. MVVM的介绍 3. Vue的入门数据的双向绑定数据的单项绑定 4. Vue的生命周期总结 引言 在当今互联网时代,前后端分离架构已经成为了Web应用开发的主流趋势。前后端分离架构的核心思…

【二叉树-02】二叉树的最近公共祖先-力扣 236 题

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

DC系列靶机3通关教程

文章目录 信息收集主机扫描端口扫描目录扫描 漏洞查找Joomscansearchsploit 漏洞利用SQL注入密码爆破反弹shell得到交互shell 提权查看操作系统版本信息搜索操作系统漏洞利用exp提权查找flag 信息收集 主机扫描 arp-scan -l端口扫描 nmap -p- -A 192.168.16.162-A&#xff1…

月木学途开发 5.轮播图模块

概述 效果图 数据库设计 轮播图表 DROP TABLE IF EXISTS banner; CREATE TABLE banner (bannerId int(11) NOT NULL AUTO_INCREMENT,bannerUrl longtext,bannerDesc varchar(255) DEFAULT NULL,bannerTypeId int(11) DEFAULT NULL,PRIMARY KEY (bannerId) ) ENGINEInnoDB AU…

【UE 粒子练习】06——创建条带类型粒子

效果 下图呈现的是一种条带粒子跟随普通粒子移动的效果。其中,条带粒子为下图中蓝色部分,橙色部分为普通粒子 步骤 1. 新建一个材质,命名为“Mat_Ribbon”,将用于条带粒子材质 材质域设置为表面,混合模式设置为半透明…

DeepWalk实战---Wiki词条图嵌入可视化

DeepWalk是2014年提出的一种Graph中的Node进行Embedding的 算法,是首次将自然语言处理领域NLP中的 word2vec拓展到了graph。万事万物皆可embedding,所以DeepWalk我感觉在图机器学习中具有非常强的应用价值。 1. 首先打开Anaconda Prompt (Anaconda)&…

分享一个基于uniapp+springboot技术开发的校园失物招领小程序(源码、lw、调试)

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! 💕&…

海国图志#7:这一周难忘瞬间,吐血整理,不得不看

这里记录每周值得分享的新闻大图,周日发布。 文章以高清大图呈现,解说以汉语为主,英语为辅,英语句子均来自NYTimes、WSJ、The Guardian等权威媒体原刊。 归档时段:20230911-20230917 摩洛哥,阿米茨米兹 在阿…

calibre和cpolar搭建一个私有的网络书库

Kindle中国电子书店停运不要慌,十分钟搭建自己的在线书库随时随地看小说! 文章目录 Kindle中国电子书店停运不要慌,十分钟搭建自己的在线书库随时随地看小说!1.网络书库软件下载安装2.网络书库服务器设置3.内网穿透工具设置4.公网…

树莓派4b装系统到运行 Blazor Linux 本地程序全记录

在Linux下运行gui程序,咱也是第一次做,属于是瞎子过河乱摸一通,写得有什么不对和可以优化的地方,希望各位看官斧正斧正. ##1. 下载烧录器 https://www.raspberrypi.com/software/####我选择的是Raspbian 64位系统,并配置好ssh账号密码,wifi,以便启动后可以直接黑屏ssh连接 ##…

全流程HEC-RAS 1D/2D水动力与水环境模拟丨恒定流模型(1D/2D)、一维非恒定流、二维非恒定流模型、HEC-RAS水质模型

目录 ​专题一 ​水动力模型基础 专题二 恒定流模型(1D/2D) 专题三 一维非恒定流 专题四 二维非恒定流模型(一) 专题五 二维非恒定流模型(二) 专题六 HEC-RAS的水质模型 专题七 高级主题 更多应用 水动力与水环境模型的数…

【自学开发之旅】Flask-会话保持-API授权-注册登录

http - 无状态-无法记录是否已经登陆过 #会话保持 – session cookie session – 保存一些在服务端 cookie – 保存一些数据在客户端 session在单独服务器D上保存,前面数个服务器A,B,C上去取就好了,业务解耦。—》》现在都是基于token的验证。 以上是基…

stm32学习笔记:GPIO输入

1、寄存器输入输出函数 //读取输入数据寄存器某一个端口的输入值,参数用来指定某一个端口,返回值是 uint8_t类型,用来代表高低电平(读取按键的值)uint8_t GPIO_ReadInputDataBit(GPIO_TypeDef* GPIOx, uint16_t GPIO_…

JVM调优笔记

双亲委派机制 app---->ext----->bootstrap 保证系统的核心库不被修改 沙箱安全机制 限制系统资源访问,将java代码限制在虚拟机特定的运行范围中 基本组件 字节码校验器 确保java类文件遵循java规范,帮助java程序实现内存保护类加载器 native…

基于SSM的北京集联软件科技有限公司信息管理系统

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…