必须使用 list 组件而非 scroll-view，因其在 nvue 中基于原生渲染，而 scroll-view 依赖 webview 导致卡顿、崩溃；list 要求固定行高、禁嵌套滚动组件、图片用 image 标签、数据更新调用 append/insert 方法，并配合 refresh 实现下拉刷新与防抖 scrollbottom 处理上拉加载。
必须用 list 组件，禁用 scroll-view ——这不是优化建议，而是 App 端 nvue 渲染层的硬性限制。
为什么 scroll-view 在 nvue 里必然卡顿
nvue 的底层是原生渲染（iOS UITableView / Android RecyclerView），但 scroll-view 仍是 WebView 封装层组件。它不走原生滚动管线，所有 item 都塞进一个 WebView 上下文，导致：
- iOS 上触发 WKWebView 强制重排，Layout 耗时飙升（可在“渲染面板”验证）
- Android 上常见
OutOfMemoryError或白屏闪退，500 条带图 item 就可能崩 -
will-change: scroll-position或-webkit-overflow-scrolling: touch完全无效——这些只对 Webview 生效，nvue 不经过这层
list 组件的强制约束条件
换用 list 不是改个标签就行，它有不可绕过的原生契约：
- 必须显式设置固定行高：
height="120"（单位为 px），否则无法计算可视区域、无法复用 cell - 禁止嵌套
scroll-view、swiper、picker等滚动/交互组件，会抢夺手势、导致滚动失效 - 图片必须用
image标签（不是img），且启用lazy-load和mode="aspectFill" - 数据更新不能直接赋值
this.listData = []，得调用this.$refs.list.append()或insert()
下拉刷新 + 上拉加载的正确写法
nvue 的 list 不内置 refresher-enabled，也不能靠 CSS 模拟遮罩，必须配合 refresh 组件和事件监听：
- 下拉刷新：外层包裹
<refresh></refresh>节点，且list必须设show-scrollbar="false"，否则下拉手势被滚动条拦截 - 上拉加载：监听
scrollbottom事件，但要加防抖逻辑：if (this.loading || this.noMore) return - 每次
append()后，仅首次需调用this.$nextTick(() => { this.$refs.list?.scrollToBottom() })，避免滚动跳动
吸顶 tab + swiper 切换的避坑要点
当需要 tab 吸顶 + 左右滑动列表时，常见错误是把 swiper 套在 list 里——这会破坏原生滚动链路：
- 正确结构是：外层
list→ 内部cell→u-tabs吸顶 →swiper平级放在cell内，每个swiper-item对应一个子list（非scroll-view） - 子
list必须通过setSpecialEffects接入父手势，否则左右滑动时子列表不响应 - tab 吸顶高度必须动态计算并透传给子
list的headerHeight属性，否则内容被遮挡
最容易被忽略的是：每个 cell 是独立原生实例，里面不能放 watch、computed 或深层响应式对象——它们不会被 Vue 实例代理，只会徒增内存开销。真正的性能瓶颈，往往藏在“看起来没问题”的响应式滥用里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
