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.pswp.cn/bicheng/85408.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/85408.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/85408.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java線程同步的簡單理解

為什么需要線程同步 對于以下代碼&#xff1a;兩個線程對同一個變量分別進行100000次加一和減一操作&#xff0c;但是每次運行的輸出基本都是不同的&#xff08;注意線程的join操作保證了兩個線程都運行完之后才執行System.out.println&#xff09; import org.junit.Test;pu…

Makefile的通用模板 + 倒計時小程序(13)

文章目錄 Makefile 的通用模板1. Makefile 的推導原則2. 設計 Makefile 的通用模板3. 通用模板代碼&#xff08;可以直接拿來用&#xff09; Linux 第一個系統程序-進度條&#xff08;7-3.00.00&#xff09;1. 補充回車與換行2. 行緩沖區3. 倒計時小程序 Makefile 的通用模板 …

【ArcGIS】水文分析與流域劃分

【ArcGIS】水文分析與流域劃分 一、基礎數據處理1、下載數據2、拼接DEM數據3、填充洼地4、流向分析5、流量分析6、河網生成&#xff08;柵格計算器&#xff09;7、河網分級8、河流鏈接&#xff08;提取子流域的關鍵&#xff09; 二、多個小流域提取1、捕捉傾瀉點2、集水區&…

【C++】簡單工廠模式/工廠方法模式/抽象工廠模式對比

目錄 一、簡單工廠模式&#xff08;Simple Factory Pattern&#xff09;二、工廠方法模式&#xff08;Factory Method Pattern&#xff09;三、抽象工廠模式&#xff08;Abstract Factory Pattern&#xff09;四、三者對比總結五、選擇建議如果這篇文章對你有所幫助&#xff0c…

博圖SCL中CONTINUE語句詳解:高效循環控制案例

博圖SCL中CONTINUE語句詳解&#xff1a;高效循環控制利器 在博圖&#xff08;TIA Portal&#xff09;的SCL&#xff08;結構化控制語言&#xff09;編程中&#xff0c;CONTINUE語句是優化循環流程的強大工具。它允許您**跳過當前循環迭代的剩余代碼&#xff0c;直接進入下一次…

django HttpResponse 加返回碼

在Django框架中&#xff0c;HttpResponse對象是用來構造HTTP響應并將其發送回客戶端的。當你創建一個HttpResponse對象時&#xff0c;你可以指定一個返回碼&#xff08;或狀態碼&#xff09;&#xff0c;這是HTTP響應的一部分&#xff0c;用來表示請求的處理結果。狀態碼是三位…

【俄語圖片文字識別】批量識別俄語圖片文字,識別俄語圖片文字的操作步驟和注意事項

場景&#xff1a;在俄語學習&#xff0c;俄語工作中經常遇到一些文字圖片&#xff0c;如何將韓語圖片文字從圖片上扣下來&#xff0c;我們可以直接復制粘貼&#xff0c;提高我們的工作效率 我們會用到一款小工具&#xff1a; 軟件操作步驟&#xff1a; 第一步、打開軟件 第二…

關于AB PLC的ethernet/IP 通信 c++搭建

1.下載開源的libplctag庫 2.通過Cmake-gui生成工程文件 3.編譯生成對應的Debug 4.配置VS studio 源碼 #include "libplctag.h" #include <cstring> #include <iostream> #include <thread> int main() { plc_tag_set_debug_level(PLCTAG_DEB…

實驗分享|自研局部DIC-GPU算法與開源GPU算法對比實驗

1實驗背景 數字圖像相關法DIC是材料力學領域研究的關鍵技術&#xff0c;其中局部DIC憑借亞像素級精度、全場測量等優勢&#xff0c;成為材料局部變形分析的優選方案。傳統CPU計算難以應對局部DIC數萬個子區并行計算需求&#xff0c;新興GPU算法一定程度提高了計算效率&#xf…

P2066 機器分配

P2066 機器分配 - 洛谷 題目描述 總公司擁有高效設備M臺&#xff0c;準備分給下屬的N個分公司。各分公司若獲得這些設備&#xff0c;可以為國家提供一定的盈利。問&#xff1a;如何分配這M臺設備才能使國家得到的盈利最大&#xff1f;求出最大盈利值。其中M?15&#xff0c;N…

Vue 復制頁面內容

方法 1&#xff1a;使用 document.execCommand(copy) 在用戶觸發的事件中 這種方法適用于用戶觸發的事件&#xff08;如點擊按鈕&#xff09;&#xff0c;因為這是 execCommand(copy) 的唯一允許場景。 <template><button click"copyToClipboard">復制…

暑期前端訓練day1

js——記憶函數 2025-06-19 day1 一、記憶函數Ⅰ&#xff1a; 鏈接&#xff1a;https://leetcode.cn/problems/memoize/?envTypeproblem-list-v2&envIdGR5hbGen (1) 題意&#xff1a;給定一個函數&#xff0c;返回一個記憶版的函數&#xff0c;其中你只會包含三個可能輸…

鴻蒙網絡編程系列54-倉頡版實現Smtp郵件發送客戶端

1. SMTP郵件發送客戶端 在本系列的第4篇文章《鴻蒙網絡編程系列4-實現SMTP郵件發送客戶端》中&#xff0c;基于ArkTS語言在API9環境下使用TCPSocket對象演示了SMTP客戶端的實現&#xff0c;并且通過騰訊郵件服務器執行了實際的郵件發送。不過&#xff0c;在2024年末&#xff0…

【慧游魯博】【12】UI美化·圖標選擇與變換·動態交互·格式定義

文章目錄 圖標設計迭代過程初始版本問題分析優化措施 游覽畫卷美化原因當前效果展示美化步驟(1) 代碼修改結構優化CSS&#xff08;優化樣式&#xff09; (2) 圖標選擇&#xff08;4種方案&#xff09;(3) 交互優化 版本一版本二1. 修改HTML結構2. 新增CSS樣式色彩控制技術性能優…

IMU介紹

IMU(Inertial Measurement Unit,慣性測量單元)是一種基于慣性原理的傳感器,通過測量物體的加速度和角速度來獲取運動狀態信息。以下從技術原理、核心組件、應用場景及關鍵指標等方面展開詳細解析: 一、IMU的技術原理與核心組件 1. 工作原理 慣性力學基礎:利用牛頓第二定…

MOS管和比較器

目錄 前言一、前置器件復習使用1.比較器工作特性2.光電二極管3.紅外出水水龍頭4.溫控風扇工作原理 二、MOS管1.前置1.1 增強型MOS管1.2 耗盡型MOS管1.3 四種1.4 比較 2.基本結構3.導通條件4.開關電路的設計方法5.寄生電容問題6.寄生二極管不能忽略7.Nmos管做電源開關的注意事項…

從代碼學習深度強化學習 - Double DQN PyTorch版

文章目錄 前言理論篇:為什么需要 Double DQN?代碼實現篇:構建一個 Double DQN 智能體2.1 項目設置與輔助函數2.2 環境 (Environment)2.3 DQN 的核心組件2.3.1 Replay Buffer (經驗回放池)2.3.2 Q-Network (Q網絡)2.3.3 The Double DQN Agent (Double DQN 智能體)訓練與結果3…

四非鼠鼠計算機專業的保研分享

四非鼠鼠的計算機專業保研分享 1.前言 鼠鼠的本科學校是一所不怎么出名的四非院校&#xff0c;專業是計算機科學與技術。在寫下這篇文章時&#xff0c;鼠鼠并不是為了炫耀什么&#xff0c;而是想把自己在保研路上的一些踩坑經歷分享出來&#xff0c;尤其是寫給那些和我一樣&a…

【C++詳解】STL-vector使用底層剖析和實現

文章目錄 vector介紹vector和string的區別補充知識initializer_listemplace_back結構化綁定 vector的使用構造析構遍歷修改insertfind流插入/流提取vector\<vector>(楊輝三角) vector模擬實現淺品STL源碼構造函數拷貝構造多參數構造迭代器區間構造n個val初始化swapoperat…

MySql升級安裝、socket 及密碼重置

升級 項目需要使用Mysql8.0, 查看自己的ubuntu22.04上mysql版本為5.7&#xff0c; 使用以下命令自動升級到8.0版本。 sudo apt install Mysqlsock錯誤&#xff1a; Can’t connect to local MySQL server through socket 運行mysql -u -p 報以下錯誤&#xff1a; ERROR 200…