uni-app 预渲染虚拟列表
先以正式列表相同的宽度预渲染少量代表样本，测出类型高度表，再建立布局与可见窗口。将数据处理、布局计算、视图测量与滚动适配分开；分页、筛选、选择、权限和请求竞态仍由页面管理。
行级绑定约束
虚拟行的定位样式必须在窗口数据生成、布局更新或适配层中预先计算，并作为字段写入可见节点，例如 node.style；模板直接绑定 :style="node.style"。禁止在 v-for 行上调用依赖当前行的样式方法，例如 :style="nodeStyle(node)" 或 getRowStyle(row)。
uni-app 的小程序编译和响应式更新会在滚动窗口变化时重复执行这类方法。每次执行都会重新生成行级绑定，并可能让可见 item 及其图片、加载态子组件重新提交，表现为滚动闪烁。直接绑定字段也能避免编译器为模板方法生成中间映射列表后丢失原节点的 key 字段。容器级、与单行无关的样式可以继续使用 computed，例如 listStyle 或 tailStyle。
选择布局
| 条件 | 模式 | 按需阅读 |
|---|---|---|
| 所有行有同一受控高度，无组头或行间距 | fixed |
等高列表 |
| 有有限种可证明同类等高的行结构 | typed |
分类高度列表 |
| 有组头、吸顶、分组跳转或跨窗口选择 | typed |
分组交互 |
不能由文字长度或第一条数据推断任意列表等高。自动处理无限制文本、展开行或图片异步撑高，需要额外的逐行测量、偏移更新与滚动锚点设计；本模板不提供这些能力。
接入步骤
- 核对目标页面的滚动所有者、渲染边界、稳定行标识、加载方式及生命周期。先看当前组件 CSS，确定高度契约；只虚拟化长列表区域。
- 阅读 控制器契约。从
assets/复制控制器；按目标选择 页面滚动模板 或 容器滚动模板，仅提取其中完整的vue代码块，分别保存为PageScrollExample.vue或ScrollViewExample.vue。不要把 Markdown 说明和代码围栏写入组件。连同模板导入的 适配工具 放入项目，按约定注册页面路由，修正相对导入。不复制assets/package.json到应用，它仅用于技能自身的 Node 测试。 - 用真实组件或与正式行相同的模板、宽度和样式离屏预渲染。等待页面 ready、可见和
nextTick后批量测量，校验正数尺寸；成功后一次replaceLayout。禁止display:none测量或用零高度掩盖错误。测量失败显示可重试状态。 - 全量数据、原始对象索引和滚动过程状态尽量不进入视图响应式层；模板只接收可见展示数据、总高及实际使用的状态。绑定稳定 key，操作以真实标识查回完整数据；不要用窗口索引标识行。每个可见节点的定位 style 先在窗口构造阶段生成，模板直接绑定字段，不调用行级 style 方法。
- 适配滚动坐标与生命周期，细节见 接入与验证。重测、筛选和异步回调必须处理旧结果；高度或内容变化主动更新布局，不能只等窗口边界改变。
- 按实际目标平台完成验收，明确区分纯 JS、SFC 静态检查与设备验证。不要以桌面模拟滚动证明小程序或 App 性能。
模板与默认值
- 纯 JS ES Module，无 Vue、DOM、
uni或第三方运行时依赖；Options API 示例使用原生 uni-app 标签。复制后保持调用接口或同步调整文档与测试。 fixed的边界计算为 O(1)，构建可见 k 行为 O(k)；typed布局重建 O(n)，边界查询 O(log n)，构建可见行 O(k)。业务排序的成本另计。- 上下各 3 屏缓冲、150ms 节流是可调起点。保留窗口边缘即时刷新与尾次使用最新位置，再依据设备上的节点数、更新频率及滑动表现调参。
- 吸顶默认是独立组头副本，没有下一组推挤动画。末组补高、页面导航、选择和请求都在适配层。
- 所有示例数据均为合成数据，没有网络请求。用于其他项目时遵守其现有接口和字段约定，不把示例字段当作业务协议。
验证与维护
从技能目录执行 node --test tests/controller.test.mjs tests/adapter.test.mjs。用项目已有编译器检查复制后的示例，仅检查改动文件。每次调整控制器契约，同步相关示例、参考说明和行为测试。
分享或更新此技能时，检查全部资源，保持通用命名和合成数据；不写入内部路径、项目标识、接口、域名、真实记录、凭证、源文档摘录或日志。不要为追溯案例重新添加内部来源索引。
