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 }
        ]
    };
相关推荐
_r0bin_11 分钟前
前端面试准备2
前端·html
白皎14 分钟前
立志成为一名优秀测试开发工程师(第九天)——使用fiddler工具、request库进行接口测试
前端·python·fiddler
召田最帅boy14 分钟前
基于URL弹窗的图片链接生成功能技术实现
android·java·javascript
saadiya~22 分钟前
Vue3 + Element Plus 实现树形结构的“单选 + 只选叶子节点 + 默认选中第一个子节点”
前端·javascript·vue.js
方圆工作室27 分钟前
HTML5 Canvas 星空战机游戏开发全解析
前端·html·html5
正函数29 分钟前
HTML5有那些更新
前端·html·html5
zhutoutoutousan36 分钟前
基于React和TypeScript的金融市场模拟器开发与模式分析
前端·人工智能·react.js·金融·typescript·机器人·自动化
不会飞的鲨鱼39 分钟前
【QQ音乐】sign签名| data参数 | AES-GCM加密 | webpack(上)
开发语言·javascript·webpack
竹鹿众猿1 小时前
ElementUI表单验证指南
前端·vue.js·elementui
Jim-zf1 小时前
Flutter 实现6个验收码输入框
开发语言·javascript·flutter