angular的cdk组件库

目录

一、虚拟滚动

---

一、虚拟滚动

  <!-- 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>

$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 }
        ]
    };