直接用 uni-card + flex 布局可覆盖 90% QQ 空间动态排版需求，避免使用 grid 或 column-count；uni-card 的 #title、#body、#footer 插槽精准对应头部、正文、操作区三层结构，配合 flex 布局、预估图片高度与固定评论区高度等策略，确保真机稳定渲染。
直接用 uni-card + flex 布局就能覆盖 90% 的 QQ 空间动态排版需求，不用自己从头写容器、算间距、处理图片错行——尤其别碰 grid 或 column-count，真机上大概率塌陷或留白。
用 uni-card 插槽定制头部+内容+操作区
QQ 空间动态的典型结构是：头像+昵称+时间（顶部）、文字正文（居中）、多图九宫格（可选）、点赞/评论按钮（底部）。原生 uni-card 的 #title、#body、#footer 插槽刚好对应这三层，比硬套 view + 大量 class 更可控。
-
#title里放image+text组合，用display: flex; align-items: center对齐，避免文字基线偏移 -
#body不要用rich-text渲染用户输入的文字——它在 iOS 微信里会字体发虚、换行错乱；改用text标签 + 手动处理换行符（\n →
） -
#footer放操作按钮时，固定高度（如height: 80rpx），防止内容增删导致卡片整体跳动
九宫格图片必须用 flex-wrap + calc()，禁用 grid
QQ 空间最多显示 9 张图，且要自动换行、等宽间隙、不拉伸。小程序和安卓 WebView 对 display: grid 支持极差，一用就错列或白屏。
- 外层容器设
display: flex; flex-wrap: wrap; - 每张图的
view包裹层设flex: 0 0 calc(33.33% - 4px); margin: 2px;（三列，减去左右 margin） -
image标签必须加mode="aspectFill"，且设width: 100%; height: 100%;，父容器需有明确高度（如height: 200rpx）或用aspect-ratio: 1（仅 H5 / 小程序基础库 ≥ 2.25.0） - 超出 9 张时，第 10 张不渲染，用
+N文字盖在第九张图右上角，CSS 用position: absolute; top: 4rpx; right: 4rpx;
评论区滚动要防跳动，scroll-view 高度必须精确
QQ 空间详情页下滑时，评论区常固定在底部区域滚动。如果整个页面用 page 滚动，或评论区父容器没设高，iOS 微信里一加载新评论就会跳回顶部。
- 评论列表单独包进一个
scroll-view，高度写死，比如height: 420rpx（根据机型和导航栏高度动态算，别用100vh） - 禁用父级
scroll-view或页面滚动，只让评论区自己滚，避免嵌套滚动冲突 - 每条评论用固定高
view（如height: 100rpx），不要依赖内容自适应——否则新评论插入后整块重排，视觉跳动明显 - 输入框用
position: fixed; bottom: env(safe-area-inset-bottom);，确保始终贴底
服务端返回宽高比，前端预估图片高度防抖动
QQ 空间动态里图片加载慢会导致布局闪动、列高突变、滚动跳帧。不能等所有图 @load 完再渲染，得边加载边占位。
- 要求后端返回每张图的
width和height字段，前端按容器宽度（如340rpx）算出预估高：height = (340 * item.height) / item.width + 'rpx' - 图片标签内联写
:style="{ height: estimatedHeight }"，先撑开空间 - 真实高度在
@load回调里用uni.createSelectorQuery()查节点尺寸，更新列高并触发重排（注意节流，同一帧别多次 setData） - 安卓真机慎用
v-for直接渲染大量image，先用view包一层再放image，能缓解白屏卡顿
最易被忽略的是图片加载时机和列高更新节奏——预估高度不准会留白，查 DOM 更新太晚会跳动，而这两者之间没有银弹，必须结合服务端数据 + 客户端节流 + 容器高度约束才能稳住。
