当前位置: 首页 > 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.xdnf.cn/news/1060903.html

相关文章:

  • ROS学习之服务通信
  • 2025虚幻引擎文件与文件夹命名规律
  • Tensorflow C++ API从入门到放弃
  • STUN (Session Traversal Utilities for NAT) 服务器是一种网络协议
  • MySQL八股文
  • AIGC - Prompt Optimizer 提示词优化器
  • 编程马拉松的定义、运作与发展
  • 解锁微服务潜能:深入浅出 Nacos
  • S32DS上进行S32K328的时钟配置,LPUART时钟配置步骤详解
  • SSH服务与rsync服务配置实战
  • FPGA基础 -- Verilog 概率分布函数
  • Stable Diffusion 实战-手机壁纸制作 第二篇:优化那些“崩脸”和“马赛克”问题,让图像更加完美!
  • 【LLM学习笔记3】搭建基于chatgpt的问答系统(下)
  • AJAX拦截器失效排查指南:当你的beforeSend有效但error/complete沉默时
  • CppCon 2017 学习:Everything You Ever Wanted to Know about DLLs
  • API 接口:程序世界的通用语言与交互基因
  • Spring Boot 虚拟线程 vs WebFlux:谁更胜一筹?
  • 主流防火墙策略绕过漏洞的修复方案与加固实践
  • 啊啊啊啊啊啊啊啊code
  • C++实现手写strlen函数
  • 什么是池化
  • [11-5]硬件SPI读写W25Q64 江协科技学习笔记(20个知识点)
  • Java求职者面试指南:Spring, Spring Boot, Spring MVC, MyBatis技术点深度解析
  • RK3568笔记八十五:LVGL播放AVI视频
  • MySQL读写分离技术详解:架构设计与实践指南
  • 不同系统修改 Docker Desktop 存储路径(从C盘修改到D盘)
  • 【AI论文】SWE-Factory:您的自动化工厂,提供问题解决培训数据和评估基准
  • PHP 生成当月日期
  • JavaEE->多线程2
  • 介绍一款免费MES、开源MES系统、MES源码