- 综合排序
- 最热优先
- 最新优先
- </template> <script> import VirtualScroll from 'vue-virtual-scroll-list'; const ComponentA /components/ComponentB.vue'); export default { components: { VirtualScroll }, data() {来自专栏前端
【Vue.js 优化】从懒加载到虚拟滚动，全面掌握性能提升策略
<template> <VirtualScroll :items="items" :item-height="50"> <template #default="{ item }">
{{ item.name }}</template> </VirtualScroll> </template> <script> import VirtualScroll from 'vue-virtual-scroll-list'; export default { components: { VirtualScroll >87443编辑于 2025-01-08
【HarmonyOS Next】鸿蒙循环渲染ForEach，LazyForEach，Repeat使用心得体会
LazyForEach：1.只能在容器列表组件中使用2.数据源的样板配置代码太过于冗余3.回收机制，没有复用View，快速列表时，还是会有性能损耗三、Repeat的优点和和使用介绍Repeat提供了两种模式non-virtualScroll 模式和virtualScroll模式。 non-virtualScroll模式类似于ForEach的使用。渲染短数据列表、组件全部加载的场景。 ComponentV2struct ItemView { @Param @Require data: string; build() { Text(this.data) .fontSize(30) }}virtualScroll virtualScroll模式不支持V1装饰器，混用V1装饰器会导致渲染异常，不建议开发者同时使用。
优化长列表性能：虚拟滚动在React中的实践与思考
基础组件结构首先创建虚拟滚动组件的基本框架：import React, { useState, useRef, useMemo } from 'react';const VirtualScroll =
《从零到企业级：基于 DevUI 的 B 端云控制台实战搭建指南》
DTable 提供： 虚拟滚动（virtualScroll）避免 DOM 卡顿 列配置化（columns）、自定义渲染（render） 分页 + 排序 + 筛选联动 <template> <d-table { size: 'sm', onClick: () => openDetail(row.id) }, '详情') } ] </script> ⚠️ 避坑：开启 virtualScroll
从OneCode3.0到Qoder：我的智能编程助手初体验
CustomAnnotation(caption = "结束索引", hidden = true) private int endIndex = 50; private boolean virtualScroll setStatus(UserStatusEnum status) { this.status = status; } public boolean isVirtualScroll() { return virtualScroll ; } public void setVirtualScroll(boolean virtualScroll) { this.virtualScroll = virtualScroll; }}场景三
如何渲染几万条数据并不卡住界面
代码存放在VirtualScroll/rudeRender 分片实现 实现思路为：每几十毫秒渲染20个。这个间隔时间可以使用requestAnimationFrame。 代码存放在VirtualScroll/zoneRender 虚拟滚动列表形式 长列表的渲染主要存在两个问题 白屏时间过长 页面节点过多 分片实现解决了第一个问题，但页面节点仍然是全量的。
OneCode 组件服务通用协议栈：构建企业级低代码平台的技术基石
OneCode组件采用多种渲染优化策略，确保在大数据量场景下的性能表现：1.1 虚拟滚动列表类组件默认实现虚拟滚动机制，只渲染可视区域内的元素：const list = new xui.UI.List({ virtualScroll 性能调优建议2.1 大数据列表优化// 高性能列表配置const highPerfList = new xui.UI.List({ virtualScroll: true, itemHeight:
《不止于“开箱即用”：DevUI 表格与表单组件的高阶用法与避坑手册》
方案：启用 virtualScroll，但需注意三个关键点： <template> <d-table :data="largeData" :columns="columns"
【Appetite】ionic3实录（六）首页实现
用了结构指令ngIf来选择显示视频还是画廊；按钮组可以换用grid布局；此外，为了性能考虑，应用virtualScroll，但我简单一用时布局有变形，赶时间没分析，换用现在方式。
【跟着AI学】MindFlow项目开发实战（三）
; /** 结束索引 */ endIndex: number; /** 偏移量 */ offset: number; } /** * 虚拟滚动类 */ export class VirtualScroll VirtualScrollConfig) { const [scrollTop, setScrollTop] = React.useState(0); const virtualScrollRef = React.useRef<VirtualScroll virtualScrollRef.current) { virtualScrollRef.current = new VirtualScroll(config); } else {
供应链系统中SKU多维度过滤搜索前端实现与AI协作开发实践
return { currentPage, totalPages, currentItems, setCurrentPage };}// 虚拟滚动组件简化实现function VirtualScroll
供应链系统组件库设计：如何平衡通用性与业务特异性
return ( <Table style={tableDensity[density]} data={data} columns={columns} virtualScroll
从前端组件到业务模型：元架构思维下的低代码实践
虚拟滚动优化optimizeLargeList(metadata,data){if(data.length>100){return{...metadata,props:{...metadata.props,virtualScroll
Ooder A2UI架构白皮书
pageSize = 20)配置分页，结合后端PageHelper实现分片查询支持虚拟滚动，仅渲染可视区域内的数据配置示例：@GridAnnotation( pageSize = 20, virtualScroll
