nvue在App端对聊天布局更关键，因其原生渲染解决vue页面scroll-view的卡顿、错位、定位不准等问题，滚动稳定60fps，且需手动处理高度、滚动到底部及键盘避让等细节。
为什么nvue在App端对聊天布局更关键
因为vue页面的scroll-view在App端（尤其Android）存在严重滚动卡顿、消息气泡错位、输入框弹起后定位不准等问题；而nvue使用原生渲染引擎，scroll-view和web-view等组件直接映射到原生控件，滚动帧率稳定在60fps，消息列表撑开、自动滚动到底部、键盘避让等行为都更可靠。
nvue中scroll-view必须设固定高度且不能依赖vh单位
在nvue里，scroll-view不会自动继承父容器高度，若只写height: 100%或height: 100vh，实际高度为0，导致内容不可滚动。必须用rpx或px显式设定。
- 正确写法：
height: calc(100vh - 120rpx)（减去导航栏+输入框高度），但注意nvue不支持calc()函数 - 推荐方案：用flex布局包裹
scroll-view，父容器设flex: 1，scroll-view设flex: 1并启用scroll-y - 避免用
vh单位——nvue解析时会失效，一律换算成rpx（如iPhone X系列安全区下可用height: 600rpx）
消息列表自动滚动到底部的两个关键点
nvue中scroll-view的scroll-top不是“滚动距离”，而是“滚动偏移量”，且初始值为0时并不表示顶部——它默认从内容顶部开始计算，但首次渲染时内容高度未就绪，直接赋值会失败。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 必须等消息列表
v-for渲染完成后再触发滚动，建议用$nextTick+scrollIntoView（nvue支持）或手动计算scroll-top - 不要用
scroll-into-view属性绑定最后一项id——nvue中该属性在动态插入时不可靠 - 更稳妥的做法：监听
messages.length变化，在$nextTick里调用this.$refs.scrollView.scrollTo({bottom: 0}) - 注意iOS和Android对
scrollTo的响应差异：iOS需加duration: 0才即时生效，Android则可省略
输入框与键盘避让的nvue专属处理
vue页面靠@keyboardheightchange事件调整scroll-top，但在nvue中该事件不触发；必须改用原生键盘监听+动态修改scroll-view的bottom内边距。
立即学习“前端免费学习笔记（深入）”；
- 监听
uni.onKeyboardHeightChanged，获取height值 - 将该值存入data，绑定到
scroll-view的:style="{ paddingBottom: keyboardHeight + 'px' }" - 键盘收起时，
height变为0，paddingBottom自动归零 - ⚠️注意：nvue中
px是真实像素，不能用rpx；若需适配不同屏幕，可按比例缩放（如Math.round(keyboardHeight * 0.8)）
nvue的布局优势不是“多写几行代码就能有”，而是每个细节都得绕开vue层的抽象，直触原生约束——比如高度必须算死、滚动必须手动触发、键盘事件必须原生监听。漏掉任意一环，App端就会出现白屏、卡顿或遮挡，这些坑往往只在真机测试时才暴露。
