angular的cdk组件库

目录

一、虚拟滚动


一、虚拟滚动

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 }
        ]
    };
相关推荐
群联云防护小杜1 小时前
如何有效防御服务器DDoS攻击
运维·服务器·前端·tcp/ip·安全·ddos
liuyang___2 小时前
vue3+ts的computed属性怎么用?
前端·javascript·vue.js
cwl722 小时前
Unity WebGL、js发布交互
javascript·unity·webgl
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS珠海网页设计网页设计(4页)附源码
javascript·css·html
爱编程的鱼2 小时前
如何用CSS实现HTML元素的旋转效果:从基础到高阶应用
前端·css·html
布兰妮甜4 小时前
Node.js入门指南:开启JavaScript全栈开发之旅
开发语言·javascript·node.js
Wcowin4 小时前
Mkdocs页面如何嵌入PDF
前端·pdf·mkdocs
Joker Zxc4 小时前
【前端基础】7、CSS的字体属性(font相关)
前端·css
一个W牛5 小时前
精选面试题
javascript·面试