九宫格布局用flex实现：每行3图，flex: 0 0 calc(33.333% - 2 * 8rpx)，图片包view设overflow: hidden；文字换行需后端返回供rich-text渲染；预览图路径须合法且过滤无效项；滚动卡顿应禁用scroll-view改用原生滚动并启用懒加载。
uni-app里用flex实现朋友圈图片九宫格布局
朋友圈那种最多9张图、自动换行、等宽等高、间隙均匀的布局，靠flex最稳，不用grid（H5兼容性差，小程序不支持CSS Grid部分特性）。关键不是“怎么排”，而是“怎么算列数+处理余数”。
- 固定每行3图（微信朋友圈标准），用
display: flex; flex-wrap: wrap;，子项flex: 0 0 calc(33.333% - 2 * 8rpx)（假设间隙8rpx） - 图片必须设
width: 100%; height: 100%; object-fit: cover;，否则拉伸变形 - 别直接对
image标签设宽高——uni-app中image在App端不响应height，得包一层view并设overflow: hidden; - 空位补白：若图片数不是3的倍数（如7张），最后两个位置留空会导致布局错乱，需用
v-for补足至最近3的倍数，用transparent占位图或空view撑开
uni-app中u-parse或rich-text渲染朋友圈文字时换行失效
朋友圈文字常含换行符\n或富文本，但rich-text默认忽略换行，u-parse对br支持不稳定。根本原因是uni-app跨端对空白符处理不一致。
- H5端
\n可用white-space: pre-line;生效，但App和小程序需转成<br>再交给rich-text - 推荐做法：后端返回文字时统一用
<br>换行；前端接收后不做额外replace，直接传给rich-text的nodes属性 - 若必须用纯文本+
\n，则用view包裹，配合word-break: break-word; white-space: pre-line;，但iOS App端仍有概率吞掉首行前导空格
九宫格图片点击预览时uni.previewImage黑屏或路径报错
常见错误是传了相对路径、未加http(s)://或/static/前缀，或数组里混入null/undefined导致整个预览失败。
- 确保
current参数与urls数组索引严格对应，且urls每一项都是合法可访问的字符串路径 - 本地静态图必须写全路径：
/static/img/1.jpg，不能只写1.jpg；网络图必须带协议头 - 使用前过滤无效项：
const validUrls = urls.filter(u => typeof u === 'string' && u.trim()) - App端预览大图容易OOM，建议服务端对原图做
q=60压缩后再传，避免客户端解码崩溃
下拉刷新+上拉加载时九宫格列表滚动卡顿
不是数据量大，而是图片未懒加载或image重复创建DOM节点。uni-app的scroll-view在iOS下对大量image重绘极其敏感。
- 禁用
scroll-view，改用页面级原生滚动（page配置"disableScroll": false），让系统接管滚动性能 - 所有图片必须加
lazy-load属性（小程序有效），H5端用intersectionObserver手动控制加载时机 - 避免在
v-for中动态绑定src——先设占位图/static/loading.png，图片加载完成后再替换成真实URL - 单页图片超过20张时，考虑分页而非无限滚动，减少DOM节点总数
九宫格看着简单，但跨端图片加载、预览、滚动三者耦合极深。最容易被忽略的是App端image的mode取值——aspectFill在某些Android机型会裁切异常，换成scaleToFill再配overflow: hidden更可控。
