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

相关文章:

  • 探索算法秘境:量子随机游走算法及其在图论问题中的创新应用
  • Python 自动化运维与DevOps实践
  • JVM(7)——详解标记-整理算法
  • 基于YOLOv10算法的交通信号灯检测与识别
  • RTSP播放器低延迟实践:一次对毫秒级响应的技术探索
  • 从零开始的云计算生活——第二十天,脚踏实地,SSH与Rsync服务
  • ThinkPHP结合使用PHPConsole向Chrome 控制台输出SQL
  • 计算机网络 网络层:数据平面(一)
  • ​ CATIA V5与3DEXPERIENCE协同设计:引领无人机行业新纪元
  • 【无人机实时拼图框架(正射影像)论文翻译】OpenREALM: Real-time Mapping for Unmanned Aerial Vehicles
  • 14.8 AI写作核心技术解析:四阶段分层提示工程如何实现从大纲到风格的全流程优化
  • RPC - Response模块
  • 2025年通信安全员考试题库及答案
  • JVM(6)——详解标记-清除算法
  • 安卓vscodeAI开发实例
  • 安卓JetPack篇——Livadata
  • 无人机电机模块技术分析
  • Vue-11-前端框架Vue之应用基础父组件传值到子组件props的使用
  • 破局基建困局:国有平台公司数字化转型的生态重构
  • Spring Boot 集成 Elasticsearch(含 ElasticsearchRestTemplate 示例)
  • 华为网路设备学习-25(路由器OSPF - 特性专题 二)
  • CSS语法中的选择器与属性详解
  • day42-硬件学习之温度传感器及(ARM体系架构)
  • AR/VR显示为何视场受限?OAS对标波导案例来解决
  • 【跨界新视野】信号处理遇上VR/AR:下一代沉浸体验的核心技术与您的发表蓝海
  • C++实现异步(重叠)管道通信
  • 【MySQL基础】MySQL内置函数全面解析:提升你的数据库操作效率
  • ③-1实现 FastAdmin 默认开启通用搜索功能的方法
  • 教学的新革命!大模型生成讲解,Manim 打造动画视频
  • 【MySQL】SQL基础