转发列表用flex实现自动换行+等宽缩放：父容器设display: flex + flex-wrap: wrap + margin模拟gap；卡片用flex: 0 0 calc(50% - 8px)或calc(33.333% - 12px)，加max-width: 300rpx；图片width: 100% + height: auto；文字用word-break: break-word。
转发列表怎么用 flex 实现自动换行+等宽缩放
转发列表本质是「多层级嵌套的流式卡片」，不是靠 JS 算列数。关键在于让每张转发卡片自适应宽度、允许换行、且不因内容长短破坏整体节奏。
父容器必须设 display: flex + flex-wrap: wrap + gap（H5/小程序基础版用 margin 模拟）；每张卡片用 <view class="repost-item"></view> 包裹，不设固定 width，只设 flex: 0 0 calc(50% - 8px)（双列）或 calc(33.333% - 12px)（三列），并加 max-width: 300rpx 防长图撑爆。
- 真机上 iOS 微信小程序对
gap支持不全，建议统一用margin-right+margin-bottom替代 - 卡片内图片必须设
width: 100%+height: auto，否则在 Android 下可能拉伸变形 - 文字区域要用
word-break: break-word，避免英文长单词卡住换行
点击转发项怎么触发多级预览（不是跳新页）
多级预览 ≠ 多个页面栈，而是同一层 view 内动态展开子级结构。核心是用 v-if 控制子级显隐 + ref 获取滚动锚点 + scroll-into-view 定位，避免 uni.navigateTo 导致的白屏和返回卡顿。
每个转发项加 @tap="toggleRepost(id)"，维护一个 expandedMap 对象记录展开状态：{'123': true, '456': false}。展开时，用 nextTick 确保 DOM 渲染后再调用 scroll-view 的 scrollIntoView 方法。
- 不能直接用
animation控制高度展开——scroll-view不会重算滚动高度，导致底部内容被截断 - 子级预览内容需用
slot或scoped-slot注入，避免重复请求接口 - Android 下
scroll-into-view有时失效，可 fallback 到uni.pageScrollTo+ 计算 offsetTop
为什么不能用 渲染转发内容
<rich-text></rich-text> 组件渲染后是纯静态节点，所有绑定的 @tap、data-* 属性全部丢失，且无法响应子级事件委托。转发列表里常含「@用户」「#话题」「链接」等可交互元素，必须由 Vue 实例控制生命周期。
- 正则提取
@(.*?)\s和#(.*?)#后，要包裹成带class="at-user"/class="topic-tag"的<span></span>，再统一用事件委托捕获 - 转发原文若含 HTML 字符（如
<），需先uni.utils.htmlDecode解码，否则显示为源码 - 某些安卓低版本 WebView 对
innerHTML插入的style属性支持异常，建议所有样式走 class，不写内联 style
预览层级深了怎么避免内存泄漏
每展开一级，就新建一个 scroll-view 子容器 + 数据副本，若不限制深度，很快触发内存告警。实际做法是：只缓存最近两级展开数据，超过两级自动折叠上级，并清空其 children 数组引用。
- 用
watch监听expandedMap变化，当某 id 展开且当前已展开总数 ≥ 3 时，自动collapseAllExcept([id]) - 子级数据加载完立刻
JSON.parse(JSON.stringify(data))脱离响应式，避免 Vue Proxy 嵌套过深 - nvue 页面中禁止用
v-for渲染深层嵌套，改用list+refresh组件提升性能
多级预览真正难的不是展开动作，而是「展开后还能精准回到原位置」——滚动锚点容易被父子容器 padding、border、transform 干扰，调试时建议先关掉所有动画，用 console.log 打印 offsetTop 对比真实 DOM 位置。
