uni-app 中需自定义实现小红书式评论折叠：前2条默认展开，超出部分收起并显示「展开x条回复」按钮；通过布尔状态控制渲染条数，避免依赖组件自动计算高度；动画推荐 opacity+translatey或scaley，app端建议关闭动画；递归回复需深度限制与key隔离。
uni-app 里没有现成的「小红书式评论折叠」组件
小红书评论区的折叠逻辑不是简单显隐，而是：前 2 条默认展开，超出部分收起并显示「展开 X 条回复」按钮，点击后动态加载并平滑展开。uni-app 官方基础组件（@dcloudio/uni-ui）和主流第三方库（如 uView、uni-ui 旧版）都不提供这种「按条数截断 + 动态展开」的能力 —— uni-accordion 是手风琴互斥，u-collapse 是整块开关，都不匹配。
必须自己控制展开状态和渲染条数
核心是把「是否展开」变成一个布尔状态，并用它控制实际渲染的评论数量。不要依赖组件自动计算高度或动画，否则在小程序里容易错位或卡顿。
- 数据结构里为每条评论加
isExpanded字段（初始false），或统一用页面级变量showAllComments - 渲染时用
v-for配合:key，但只遍历前showAllComments ? list.length : Math.min(2, list.length)条 - 「展开 X 条」按钮需绑定真实剩余条数：
{{ list.length - 2 > 0 ? `展开 ${list.length - 2} 条回复` : '' }} - 点击按钮只改状态，不触发重新请求（除非你设计成懒加载）；若需分页加载更多，应在按钮逻辑里调接口并
push新数据到list
展开动画别硬套 height 过渡
直接写 height: 0 → auto 在 uni-app 全平台都无效，尤其小程序里 createSelectorQuery 获取高度有延迟，且动画易掉帧。更稳妥的做法是用 opacity + translateY 或纯 JS 控制 visibility。
- H5 和小程序可用
transform: scaleY()搭配transition，比 height 更轻量 - App 端建议关闭所有动画（
show-animation="false"），原生渲染层对 CSS 动画支持差，用户感知的「卡」比「没动画」更伤体验 - 如果坚持要高度动画，必须在
$nextTick后用uni.createSelectorQuery()获取内容区域offsetHeight，再设内联style.height；收起后要清空 height 值，否则响应式布局会出错
递归回复的折叠要单独处理层级
小红书式评论包含「主评 → 回复 → 回复的回复」，不能只做一级折叠。若需对某条主评下的全部子回复做「展开/收起」，得用递归组件，但必须加深度限制和 key 隔离。
- 数据结构必须含
tree_id和comment_id，区分根评论与嵌套回复 - 递归组件里用
v-if="depth 控制最大渲染深度，避免无限嵌套导致白屏 - 每个子级的「展开」状态要用独立字段管理，比如
item.expandReplies = false，不能共用页面级开关 -
:key必须包含深度和唯一 ID，例如:key="`${item.id}-${depth}`，否则 Vue 的 diff 算法会复用节点，导致展开状态错乱
真实项目里最常被忽略的点是：「展开 X 条」按钮的点击范围太小，用户误触率高；还有在长列表中滚动时，状态未持久化，一刷新就回到默认收起状态。这两个问题不靠样式或动画解决，得靠缓存策略（如 uni.setStorageSync 存每条评论的展开状态）和足够大的点击热区来兜底。
