直接改字段、用uni.createanimation绑定到view、配合乐观更新，才能让点赞动画不抖、评论不跳、状态不错乱；v-for列表点赞后整页抖动因替换整个对象导致响应式丢失，应只改字段或用$set确保响应式生效。
直接改字段、用 uni.createAnimation 绑定到 <view></view>、配合乐观更新，才能让点赞动画不抖、评论不跳、状态不错乱。
v-for 列表点赞后整页抖动？因为替换了整个对象
这是最常踩的坑：点击点赞时写了 this.list[index] = {...item, isLiked: !item.isLiked}，Vue 的响应式系统会丢失对原对象的追踪，触发整条 v-for 重新渲染 —— 滚动位置重置、动画中断、性能掉帧全来了。
- 正确做法是只改字段：
this.list[index].isLiked = !this.list[index].isLiked（前提是初始化时数据已声明在data()中） - 如果字段是后期动态添加的，用
this.$set(this.list[index], 'isLiked', true)确保响应式生效 - 千万别把列表数据从接口返回后直接赋给未声明的变量（比如
this.newsList = res.data但 data() 里没定义newsList），这会导致响应式失效
点赞缩放动画没效果？target 必须是 view 且 export 后绑定
uni.createAnimation 是原生动画 API，不支持作用于 <text></text>、<image></image> 或 class 切换，只认容器级标签，且必须调用 .export() 才能生效。
面向 K12 语文学科的小红书笔记生产工作流。用于根据内容日历或家长痛点选题，核对教材版本与课文证据，把阅读、古诗文、习作等抽象方法落到真实课文、公式、例题和家长可执行动作，并产出标题、3:4 轮播卡片方案、生图提示词、可直接粘贴发布的正文及对抗性验收报告。用户提到小学语文、初中语文、课文解析、语文预习、阅读理解、古诗、作文、小红书图文或教育内容生产时使用。
- 模板中每个点赞按钮要包一层
<view class="like-btn-wrapper" :animation="aniData[index]> - JS 中必须在 DOM 渲染完成后创建动画实例（推荐在
onReady或nextTick后），不能在onLoad就初始化 - 每步动画后必须调用
.step()，最后一定要.export()，否则aniData[index]是空对象 - Android 上动画卡顿？加 CSS：
transform: translateZ(0)强制启用 GPU 加速
评论弹出和实时反馈怎么避免错位/重复？用索引隔离 + 防抖
点开评论区时如果直接 v-if=" showcomment> 并同步请求数据，多个项同时触发会导致 DOM 错乱、请求并发、滚动偏移。
<ul>
<li>每个评论区域独立控制：<code>showComment = [] 初始化为数组，用 showComment[index] = true 控制显隐
if (!this.comments[index]) this.loadComments(index)，避免重复请求if (this.isProcessing) return; this.isProcessing = true; setTimeout(() => this.isProcessing = false, 300)
this.comments[index].push(newItem)（乐观更新），再发请求；失败则 .pop() 回滚“+1” 浮动动画怎么不遮挡其他内容？定位和层级要手动管
很多教程直接把 +1 放在按钮同级，结果动画一飞就压住下面的文字或图片 —— 这不是动画问题，是 DOM 结构和 CSS 层级没处理好。
-
+1容器必须用position: absolute，父容器设position: relative - 确保 z-index 足够高（比如
z-index: 999），但别全局设太高，避免覆盖 toast 或 modal - 动画结束后的清理很重要：
setTimeout里把animationData[id]设为空对象，否则下次点不动 - 不要复用同一个
animation实例操作多个 target，每个 item 应该有自己独立的animationData[index]
真正难的不是写动画，而是让动画和列表状态、网络请求、用户连点行为共存而不打架。字段别换、target 别错、export 别漏、DOM 层级别糊，四件事做稳了，小红书那种丝滑感就出来了。
