如何实现UITableViewCell侧滑删除(无红色按钮+淡入淡出效果)
实现无红色按钮的侧滑淡入淡出删除效果
我完全懂你的困扰——卡片式的UITableViewCell本来就讲究视觉连贯性和层次感,默认的红色删除按钮硬生生插在卡片边缘,确实破坏了整体设计。而且你之前尝试的方法虽然设置了.fade动画,但因为编辑状态的配置问题,根本没触发预期的效果。
问题根源
你当前设置editingStyleForRowAt返回.none,这会让系统的默认编辑交互逻辑失效,所以后续的deleteRows动画自然达不到你想要的淡入淡出效果。要实现无按钮的侧滑删除,我们需要用iOS 11+引入的自定义侧滑动作配置来替代旧的编辑方法。
解决方案代码
直接替换你原来的三个编辑相关方法,用下面的实现:
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { // 创建删除动作,隐藏标题和背景色,避免显示红色按钮 let deleteAction = UIContextualAction(style: .destructive, title: "") { [weak self] (_, _, completion) in guard let self = self else { completion(false) return } // 先给目标Cell添加淡入淡出动画 if let cell = tableView.cellForRow(at: indexPath) { UIView.animate(withDuration: 0.3) { cell.alpha = 0.0 } completion: { _ in // 动画结束后删除数据并更新表格 self.pastOrders.remove(at: indexPath.row) tableView.deleteRows(at: [indexPath], with: .fade) completion(true) } } else { // 极端情况没拿到Cell时直接执行删除 self.pastOrders.remove(at: indexPath.row) tableView.deleteRows(at: [indexPath], with: .fade) completion(true) } } // 把动作背景设为透明,彻底隐藏按钮痕迹 deleteAction.backgroundColor = .clear // 配置侧滑:允许全滑直接触发删除,只保留删除动作 let config = UISwipeActionsConfiguration(actions: [deleteAction]) config.performsFirstActionWithFullSwipe = true return config }
关键细节说明
- 隐藏按钮痕迹:通过把
UIContextualAction的标题设为空、背景色设为透明,侧滑时完全看不到红色按钮,完美适配你的卡片Cell。 - 自定义淡入淡出:先给Cell做alpha从1到0的动画,再执行表格行删除,视觉上就是Cell平滑消失,同时其他Cell自动上移,保持卡片布局的层次感。
- 流畅的交互体验:
performsFirstActionWithFullSwipe = true开启全滑触发,用户轻轻一滑到底就能完成删除,操作更顺手。
注意事项
- 这个方案支持iOS 11及以上,现在绝大多数App都不需要兼容更低版本了;如果需要兼容iOS 10及以下,就得自定义
UIPanGestureRecognizer来实现侧滑逻辑,但复杂度会高一些。 - 确保你的Cell背景色和TableView背景色协调,避免透明action背景露出违和的颜色。
- 动画时长可以根据你的设计需求调整,0.3秒是比较自然的速度。
内容的提问来源于stack exchange,提问作者rgoncalv
相关产品推荐
相关产品推荐

