uni-app无法在系统锁屏控制面板添加收藏按钮，只能在应用内页面模拟；推荐用uni-fav组件实现UI状态渲染，需绑定响应式变量并监听@click事件，后端须每次列表请求聚合计算is_like字段确保多端同步。
收藏按钮加在锁屏控制面板上不现实
uni-app 没有原生“锁屏控制面板”概念，所谓锁屏面板（如 iOS 控制中心、Android 快捷开关）是操作系统级 UI，Web 或小程序容器无法直接注入或修改。你在 uni-app 里能做的，只是在应用内页面模拟一个类似控制面板的界面——比如首页顶部快捷栏、音乐播放页悬浮控制区、或后台常驻的 uni-popup 弹窗。强行叫它“锁屏面板”，容易误解技术边界。
用 uni-fav 组件快速嵌入收藏按钮
如果你指的是在某个自定义控制面板页面（比如播放页顶部工具栏）加收藏按钮，uni-fav 是最轻量的选择，但要注意它默认不带交互逻辑，只负责 UI 状态渲染：
-
star设为true显示星形图标（不是心形），若要心形请换uni-icons+type="heart" -
checked必须绑定响应式变量（如v-model="item.isFavorited"），否则点击无反馈 -
contentText是对象，不能写成字符串：{ contentDefault: '收藏', contentFav: '已收藏' } - 点击事件监听
@click，别依赖change——uni-fav的change事件不触发，只有click
示例片段：
<uni-fav
:checked="item.isFavorited"
@click="toggleFavorite(item)"
:content-text="{ contentDefault: '收藏', contentFav: '已收藏' }"
/>
真正在控制面板里实现滑动收藏，得手动写 touch 逻辑
你看到的网易云那种左滑出“收藏”菜单的效果，在 uni-app 里不能靠 swipe-action 实现——它在微信小程序完全不可用，App 端也要开编译选项且易冲突。可靠做法是自己监听 touchstart/touchmove/touchend：
- 外层容器禁用
catchtouchmove，否则手势被吞 - 位移用
transform: translateX()，别用left，否则滚动卡顿 -
touchend后判断偏移量是否 > 120px，决定是回弹还是固定展开 - 展开状态时，收藏按钮才可点；滑动中设
isSliding = true并锁定点击，防误触 - 列表项别包
scroll-view，用uni-list或原生页面滚动，否则手势冲突
收藏状态回显必须后端聚合计算
前端展示“已收藏”不能只靠本地缓存，否则多端不同步。正确做法是在拉取列表数据时，后端用聚合查询把用户收藏 ID 列表和当前文章 ID 做 $in 匹配，返回 is_like: true/false 字段：
- 云函数里用
.addFields({ is_like: { $in: ['$_id', article_likes_ids] } }) - 前端接收后直接绑定到
item.is_like，uni-fav或自定义图标都靠它驱动 - 点击收藏后，立即更新本地
item.is_like，再发请求；失败则 UI 回滚，不等接口返回再改
最容易被忽略的是：这个 is_like 字段必须每次列表请求都重新算，不能靠前端 localStorage 缓存——用户在其他设备操作后，本机列表不会自动同步。
