uni-app如何实现类似网易音乐的列表项滑动收藏交互

swipe-action 在真机上点不动是因为微信小程序不支持其原生能力，且常因 touch 事件被拦截、与 scroll-view 手势冲突或未开启 App 编译选项导致失效；推荐用 scroll-view + 手动 touch 逻辑实现更稳定可控的左滑收藏。

swipe-action 在真机上点不动，不是你代码写错了，是它根本没生效——尤其在微信开发者工具里，压根不支持；真机调试也常因 touch 事件被拦截而失效。

为什么 swipe-action 在列表里点不动？

常见错误现象：swipe-action 点击无响应、滑动卡顿、菜单弹不出、iOS 下直接触发页面滚动

• 外层用了 catchtouchmove 或 preventDefault()，把 touch 事件吞掉了
• 把它塞进 scroll-view 里——scroll-view 和 swipe-action 的原生手势冲突，App 端会优先处理滚动
• 微信小程序环境不支持 swipe-action 原生能力，只在 App 和 H5（部分平台）可用
• App 端没开启编译选项：HBuilderX → 项目设置 → App 设置 → 勾选「启用 swipe 滑动菜单」

用 scroll-view + 手动 touch 逻辑实现左滑收藏

比依赖 swipe-action 更稳，且能精确控制收藏图标切换、回弹阻尼、阈值和动画时长

• 监听 touchstart 记录起始 clientX
• touchmove 中计算偏移量，用 transform: translateX() 驱动位移（别用 left，重排版性能差）
• 务必在 touchmove 里加 e.preventDefault()，否则 iOS 会连带触发页面滚动
• touchend 判断位移是否超过阈值（比如 120），决定是回弹还是固定展开收藏菜单
• 收藏状态切换建议用 v-model 或响应式 isFavorited 控制图标颜色和文案

列表容器必须用页面级滚动，别套 scroll-view

uni-list 默认就是页面级滚动，适合长列表；而 scroll-view 是自定义滚动容器，会劫持 touch 事件

• 直接用 <uni-list><uni-list-item>，不要包一层 <scroll-view scroll-y="true">
• 如果必须横向滚动导航栏（如网易云顶部 tab），用 scroll-x="true" 的 scroll-view 是安全的——它和列表项滑动方向正交，不冲突
• App 端若需高性能长列表，优先用 uni-list（nvue 下自动走原生 list），它会在滚动出屏后回收节点，避免内存堆积

收藏图标动态切换和防误触细节

滑动过程中快速点按容易误触发收藏，需要加防抖和状态锁定

• 滑动期间禁用点击：设 isSliding = true，在 touchend 后延时 150ms 再恢复
• 收藏图标用 <uni-icons>，通过 :type="isFavorited ? 'heart-filled' : 'heart' 切换
• 点击收藏按钮后，立即更新本地状态并调用 API；失败时 UI 回滚，别等接口返回再改状态
• 注意支付宝小程序要开启 component2 编译模式，否则 uni-icons 可能不渲染

真正难的不是滑动本身，是滑动结束那一刻的状态判定和视觉反馈节奏。位移阈值、回弹时间、图标切换时机，三者稍有不同步，用户就会觉得“卡”或“不跟手”。这些没法靠组件默认值解决，得自己调。