启用虚拟滚动列表组件可解决数据超20条时的卡顿问题，它仅渲染可视区域10～15项，千条数据滑动顺滑；绑定数据源、设条目高48px与边距4px；辅以搜索过滤或分页加载提升体验。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
码上飞AI生成的应用中，当数据列表项超过20条时，用户需反复拖拽滚动条才能查看底部内容，尤其在手机端几乎无法完成连续浏览。
启用虚拟滚动列表组件
进入码上飞编辑界面 → 点击左侧「组件库」→ 搜索「虚拟列表」→ 拖拽该组件到画布空白处。
虚拟滚动会自动只渲染当前可视区域的10～15项，其余数据保留在内存但不生成DOM节点，可让千条列表滑动如丝般顺滑。若仍用普通列表组件，加载300条数据时页面将明显卡顿甚至崩溃。
双击刚添加的虚拟列表 → 在右侧属性面板中将「数据源」绑定为你的列表变量（如 【products】）。
调整列表项高度与间距
选中列表内部的单个条目模板（通常带「item」标识）→ 右侧属性栏中把「高度」设为48px → 将「上下边距」统一设为4px。
过高的单行高度会大幅减少一屏可见条目数，导致滑动频次升高；而边距过大则浪费垂直空间，加剧滚动负担。48px是兼顾可读性与密度的临界值，实测在iPhone 15 Pro Max上单屏稳定显示12条。
添加顶部搜索与分类筛选
方法一：插入搜索框组件 → 绑定其「输入事件」到列表的「过滤逻辑」→ 编写简易过滤表达式：item.name.includes($event)。
方法二：添加标签页组件 → 设置3个标签页，分别对应「全部」「已上架」「已下架」→ 每个标签页内嵌一个独立列表，并用不同数据过滤条件（如 【items.filter(i => i.status === 'on')】）。
注意：不要在搜索框里直接写正则或复杂函数，码上飞当前版本对RegExp对象支持不稳定，会导致列表空白。
分页加载替代无限滚动
第一步：删除原有列表组件 → 从组件库拖入「分页列表」组件。
第二步：点击该组件 → 右侧属性中开启「懒加载」开关 → 设置「每页数量」为15 → 填写「加载更多文案」为“点击加载下15条”。
第三步：在「加载回调」中填入以下代码片段：
fetchMoreData({ page: $page, size: 15 }).then(res => { appendToList(res.list) })
第四步：确保你后端API支持 【page】和【size】参数传递，否则前端分页将失去意义，所有数据仍在首屏加载。
