目录
一、虚拟滚动
html
<!-- itemSize相当于每个项目的高度为30px -->
<!-- 需要给虚拟滚动设置宽高,否则无法正常显示 -->
<cdk-virtual-scroll-viewport [itemSize]="40" class="view_scroll">
<div class="main">
<div
class="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>
css
$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;
}
}
}
}
TypeScript
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 }
]
};