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 }
        ]
    };
相关推荐
tager2 分钟前
告别布局烦恼!H5自适应布局最佳实践
前端·css·前端框架
BUG收容所所长2 分钟前
HoverMask与SelectedMask——如何让低代码平台的交互体验更加直观?
前端·javascript·设计
植物系青年8 分钟前
可视化编辑 🔧 前端用“低代码”方式动态变更网页内容
前端·低代码
四月友人A10 分钟前
Chrome DevTools 深度挖掘:90%开发者都不知道的调试秘籍
前端·chrome
Mintopia18 分钟前
🌐AIGC:从硅芯片中孕育的缪斯女神
前端·javascript·aigc
去码头整点薯条吃23 分钟前
React源码(一):认识JSX
前端
掘金安东尼23 分钟前
⏰前端周刊第425期(2025年7月28日–8月3日)
前端·javascript·面试
namehu24 分钟前
为什么我的margin-top被转换为vw而不是vh?
javascript·css·postcss
小old弟24 分钟前
💯 React自定义Hook:封装数据请求
前端
雪中何以赠君别25 分钟前
Vite + Axios + Nginx 环境变量与代理配置笔记
前端·javascript·vue.js