Ionic 手势事件（Gesture）完全指南
（适用于 Ionic 7+ / Angular、Vue、React 都支持）
Ionic 内置了强大且高性能的手势系统，基于 Hammer.js，但已经深度封装，使用极其简单。
1. 常用手势事件一览表（直接可用）
| 手势事件 | 说明 | 典型用途 |
|---|---|---|
(tap) | 点击（比 click 更快、无 300ms 延迟） | 按钮、列表项点击 |
(press) | 长按（默认 251ms） | 列表项长按删除、编辑 |
(pan) | 拖拽（移动） | 侧滑删除、拖动排序 |
(panstart) | 拖拽开始 | 记录初始位置 |
(panmove) | 拖拽进行中 | 实时更新位置 |
(panend) | 拖拽结束 | 判断是否触发删除/恢复 |
(swipe) | 快速滑动（有方向） | 左右滑动切换页面 |
(swipeleft) | 左滑 | 侧滑删除 |
(swiperight) | 右滑 | 标记已读、返回 |
(rotate) | 旋转 | 图片旋转 |
(pinch) | 缩放 | 图片/地图缩放 |
2. 基础用法示例（推荐）
<!-- 1. 轻点（替代 click）-->
<ion-item (tap)="onItemTap(item)">
<ion-label>{{ item.name }}</ion-label>
</ion-item>
<!-- 2. 长按删除 -->
<ion-item (press)="onLongPress(item)">
<ion-label>{{ item.title }}</ion-label>
</ion-item>
<!-- 3. 左滑删除（最经典）-->
<ion-item
(swipeleft)="onSwipeLeft(item)"
(swiperight)="onSwipeRight(item)">
<ion-label>{{ item.name }}</ion-label>
<!-- 滑动时显示的删除按钮 -->
<ion-button slot="end" fill="clear" color="danger" *ngIf="item.swiping">
删除
</ion-button>
</ion-item>3. 高级拖拽侧滑删除（完整实现）
<!-- template -->
<ion-item
#itemElement
(panstart)="onPanStart($event)"
(panmove)="onPanMove($event)"
(panend)="onPanEnd($event)"
[style.transform]="'translateX(' + translateX + 'px)'">
<ion-label>{{ msg.content }}</ion-label>
<!-- 滑动露出的删除按钮（固定在右侧） -->
<div class="delete-btn" slot="end">
<ion-button color="danger" (tap)="delete(msg)">删除</ion-button>
</div>
</ion-item>// component.ts
translateX = 0;
maxTranslate = -100; // 露出删除按钮的距离
onPanStart(event: any) {
// 可选：添加过渡动画关闭
event.target.style.transition = 'none';
}
onPanMove(event: any) {
const x = event.deltaX;
// 只允许向左滑（负值）
if (x < 0) {
this.translateX = Math.max(this.maxTranslate, x);
} else {
this.translateX = 0;
}
}
onPanEnd(event: any) {
// 添加平滑动画
event.target.style.transition = 'transform 0.3s';
// 判断是否滑动超过阈值（例如 60px）
if (this.translateX < -60) {
this.translateX = this.maxTranslate; // 保持露出删除按钮
} else {
this.translateX = 0; // 回弹
}
}
// 重置滑动状态（删除或手动关闭后）
resetSwipe() {
this.translateX = 0;
}/* styles.scss 或组件样式 */
.delete-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ion-color-danger);
color: white;
}4. 全局启用/禁用手势（重要！）
默认情况下，Ionic 在 ion-list 上禁用了部分手势（如 swipe），需要手动开启：
<!-- 方式1：单项开启滑动 -->
<ion-item [swipeGesture]="true">
<!-- 方式2：整个列表开启所有手势（推荐） -->
<ion-list [gesture]="true">
<ion-item (swipeleft)="delete(item)">...</ion-item>
</ion-list>
<!-- 方式3：全局开启（在 app.component.ts） -->
import { GestureController } from '@ionic/angular';
constructor(private gestureCtrl: GestureController) {
this.gestureCtrl.enable(true); // 全局开启所有手势
}5. 实战推荐组合
| 需求 | 推荐手势组合 |
|---|---|
| 列表点击 | (tap) |
| 长按编辑/多选 | (press) |
| 侧滑删除 | (swipeleft) 或 (pan) + 动画 |
| 左右切换页面 | (swipeleft) / (swiperight) |
| 拖拽排序 | (pan) + GestureController |
| 图片缩放旋转 | (pinch) + (rotate) |
6. 性能提示
(tap)比(click)响应更快（无 300ms 延迟）- 复杂手势建议使用
(pan)而不是(swipe)，更可控 - 大量列表项时，记得在
ngOnDestroy中清理手势（一般自动处理）
这样掌握后，你就能在 Ionic 中实现各种酷炫的原生手势交互了！
需要我给你一个完整的「可侧滑删除 + 拖拽排序」组件模板，也可以直接发你
