angular的cdk组件库

目录

一、虚拟滚动

---

一、虚拟滚动

  <!-- itemSize相当于每个项目的高度为30px --><!-- 需要给虚拟滚动设置宽高，否则无法正常显示 --> 
<cdk-virtual-scroll-viewport [itemSize]="40" class="view_scroll"><div class="main"><divclass="item"*cdkVirtualFor="let item of selectIfy.list; let i = index"[class.active]="i === selectIfy.selectedIndex"(click)="selectIfy.onChangeIndex(i)">{{ i + 1 }}.{{ item.label }}</div></div></cdk-virtual-scroll-viewport>

$height: 40px;
.main {width: 100%;height: 100%;display: flex;flex-direction: column;.item {padding: 0 10px;width: 100%;height: $height;line-height: $height;cursor: pointer;position: relative;&.active {background-color: #e6f7ff;color: #1890ff;position: sticky;//设置为固定top: 0;//需设置才能生效z-index: 999;//防止被其他项覆盖&::before {content: '';display: inline-block;position: absolute;top: 0;left: 0;width: 3px;height: $height;background-color: #1890ff;}}}
}

 selectIfy = {selectedIndex: 0,onChangeIndex: index => {this.selectIfy.selectedIndex = index;},list: [{ label: '项目1', value: 0 },{ label: '项目2', value: 1 },{ label: '项目3', value: 2 },{ label: '项目4', value: 3 }]};