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' });}}