uni-app触底加载必须配动画，否则体验断裂；推荐用uni-load-more组件（含三种状态动画）或uni.createanimation自定义动画，但需确保onreachbottom或@scrolltolower稳定触发，避免因滚动容器配置错误导致动画失效。
uni-app 触底加载更多必须配动画，否则体验断裂
纯文字提示“上拉加载更多”或直接追加列表，用户感知不到状态变化，极易误操作或以为卡死。uni-app 里真正可用的加载动画只有两类：一是 uni-load-more 组件内置的雪花/圆圈动效，二是用 uni.createAnimation 或 CSS @keyframes 手动控制加载指示器。前者开箱即用但定制弱，后者灵活但需防重绘卡顿。
用 uni-load-more 实现基础加载动画（推荐新手）
这个组件自带三种状态对应的视觉反馈：status="more"（默认提示）、status="loading"（转圈动画）、status="noMore"（“没有更多了”）。它不依赖额外样式，动画由 uni-app 内部用 canvas 或 CSS 实现，跨端兼容性好。
-
status必须是响应式变量，不能写死；每次触发onReachBottom时先设为"loading"，请求完成后再根据是否有新数据设为"more"或"noMore" - 不要在
onReachBottom里直接修改status后立刻发请求——得等 Vue 下一轮渲染完成，否则动画可能闪一下就消失；稳妥做法是this.$nextTick(() => this.getData()) - 微信小程序中，
uni-load-more的动画高度固定，若页面有 padding/margin，需用margin-top微调位置，否则会悬空或贴底
用 uni.createAnimation 自定义加载条动画（适合需要品牌感的场景）
当设计要求加载条有品牌色、渐变、或配合列表项做位移联动时，uni.createAnimation 是唯一可靠方案。注意它只作用于绑定了 :animation 属性的元素，且动画参数必须在每次调用前重新创建实例。
- 动画 duration 设为
0可实现“瞬时定位”，比如滚动到底部时让加载条从透明滑入：animation.opacity(1).translateY(0).step({duration: 0}) - 避免在
onReachBottom中连续多次调用createAnimation—— 它会创建多个未销毁的动画实例，导致内存泄漏；应在 data 里声明loadAnimation，每次复用并重置 - App 端支持 transform + opacity 硬件加速，但 H5 端慎用
scale或rotate，容易触发重排，建议优先用translateY和opacity
滚动触底检测失效时，动画就失去意义
很多开发者把动画做得很漂亮，结果 onReachBottom 根本不触发——这是跨端最常被忽略的底层问题。它只对 <page></page> 级别滚动生效，如果你用了 <scroll-view></scroll-view> 包裹列表，onReachBottom 就永远收不到事件，所有动画都白搭。
- 确认是否在
pages.json里给当前页面配置了"enablePullDownRefresh": true—— 某些旧版 H5 端依赖该字段才启用滚动监听 - 使用
<scroll-view></scroll-view>时，必须监听其@scrolltolower事件，而不是onReachBottom；且要设置scroll-y="true"和明确高度（如height: calc(100vh - 100px)） - 真机调试时，iOS 微信小程序常因
scroll-view外层容器未设overflow: hidden导致触底检测偏移，可在父 view 加 class 强制裁剪
动画本身只是表层反馈，真正决定体验的是触底判定是否精准、状态切换是否原子化、以及失败后能否降级显示。别为了动效堆逻辑，先确保 onReachBottom 或 @scrolltolower 能稳定触发，再谈怎么让它动得好看。
