当前位置: 首页 > news >正文

angular 图斑点击,列表选中并滚动到中间位置

如图所示:

 

html代码:

1. #listContainer

2. [attr.data-id]="center.id"

     <div class="resTableCss" #listContainer><div *ngFor="let center of tbList" [attr.data-id]="center.id" class="res-item" [ngStyle]="{background:center.flag?'#2b5a87':'rgba(27, 144, 255, 0.2)','borderRight':center.flag?'0.20833vw solid#cbd70d':'0.20833vw solid rgba(27, 144, 255, 0.2)'}" (click)="tbSelect(center)"><div class="detail"><div class="detail-title"><span>{{ center.source }}</span></div><div class="detail-desc"><span>编号:{{ center.code }}</span></div></div></div></div>

ts代码:

  @ViewChild('listContainer', { static: false }) listContainer: any;// 滚动到指定项scrollToItem(id: string) {const item = this.listContainer.nativeElement.querySelector(`div[data-id="${id}"]`);if (item) {item.scrollIntoView({ behavior: 'smooth', block: 'center' });}}

http://www.lqws.cn/news/445519.html

相关文章:

  • 网页后端开发(基础5--JDBC VS Mybatis)
  • linux路由
  • 响应式数据框架性能深度分析报告(@type-dom/signals)
  • PromptWizard:强化学习或者多Agent 优化提示词
  • SpringBoot定时监控数据库状态
  • 191. 位1的个数
  • vs code配置go开发环境以及问题解决 could not import cannot find package in GOROOT or GOPATH
  • Linux树莓派项目实战:外网访问、PWM呼吸灯、超声波测距与驱动开发
  • Linux内核中通过perf_event监控内存访问的硬件断点触发流程
  • LINUX 619 NFS rsync
  • Neo4j操作指南:修改节点数据与新增节点属性
  • 1. C++ WebServer项目分享
  • Kafka性能调优全攻略:从JVM参数到系统优化
  • M-DPO复现
  • 从Excel到知识图谱再到数据分析:数据驱动智能体构建指南
  • HALCON相机标定
  • 安装MySQL 5.7导入数据,修改密码,创建账号并授权
  • CppCon 2017 学习:Everything You Ever Wanted to Know about DLLs
  • craw14ai 框架的入门讲解和实战指南——基于Python的智能爬虫框架,集成AI(如NLP/OCR)实现自动化数据采集与处理
  • 协作式机器人助力提高生产速度和效益
  • Molmo and PixMo论文精读
  • Java SE - String自定义类型
  • Docker 日志
  • XMOS基于边缘AI+DSP+MCU+I/O智算芯片的音频解决方案矩阵引领行业创新潮流
  • 运维人员常用网站列表
  • 【深度学习】条件随机场(CRF)深度解析:原理、应用与前沿
  • day35-Django(1)
  • MySQL 面试之事务和锁篇
  • 如何设计可维护、可扩展的测试框架
  • 软件范式正在经历第三次革命