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 }
        ]
    };
相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v8 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗9 小时前
React学习(十二)
javascript·学习·react.js
无羡仙9 小时前
Webpack 背后做了什么?
javascript·webpack
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron