Ionic框架卡片侧滑移除实现：解决拖拽释放后复位问题

嘿，我完全懂你现在的困扰——用Ionic做卡片侧滑移除功能，结果拖完一松手，卡片又弹回原来的位置，根本没法真正滑出屏幕对吧？其实问题出在你之前的代码只处理了拖拽过程中的位移，没在释放的时候判断是否该触发“移除”的逻辑。我来给你调整一下，保证能实现你要的效果：

核心思路 #

• 实时监听卡片的拖拽位移，记录水平方向的滑动距离
• 在拖拽释放时，判断滑动距离是否达到设定阈值（比如屏幕宽度的1/3）
• 达到阈值就通过动画让卡片滑出屏幕；没达到就平滑回弹到原位

先看看你可能尝试过的类似代码（我猜大概是这样） #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GestureController, Gesture } from '@ionic/angular';

@Component({
  selector: 'app-card-swipe',
  templateUrl: './card-swipe.component.html',
  styleUrls: ['./card-swipe.component.scss'],
})
export class CardSwipeComponent {
  @ViewChild('card') card!: ElementRef;
  gesture!: Gesture;

  constructor(private gestureCtrl: GestureController) {}

  ngAfterViewInit() {
    this.createGesture();
  }

  createGesture() {
    this.gesture = this.gestureCtrl.create({
      el: this.card.nativeElement,
      gestureName: 'swipe',
      onMove: (ev) => {
        this.card.nativeElement.style.transform = `translateX(${ev.deltaX}px)`;
      },
      onEnd: () => {
        this.card.nativeElement.style.transform = 'translateX(0)';
      },
    });
    this.gesture.enable(true);
  }
}

修改后的完整实现代码 #

1. TypeScript组件逻辑 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GestureController, Gesture } from '@ionic/angular';

@Component({
  selector: 'app-card-swipe',
  templateUrl: './card-swipe.component.html',
  styleUrls: ['./card-swipe.component.scss'],
})
export class CardSwipeComponent {
  @ViewChild('card') card!: ElementRef;
  gesture!: Gesture;
  // 自定义侧滑阈值，这里设为屏幕宽度的1/3，你可以按需调整
  private swipeThreshold = window.innerWidth / 3;

  constructor(private gestureCtrl: GestureController) {}

  ngAfterViewInit() {
    this.createGesture();
  }

  createGesture() {
    this.gesture = this.gestureCtrl.create({
      el: this.card.nativeElement,
      gestureName: 'card-swipe',
      threshold: 0, // 取消默认阈值，让拖拽一开始就触发响应
      onMove: (ev) => {
        // 拖拽过程中实时更新卡片位置
        this.card.nativeElement.style.transform = `translateX(${ev.deltaX}px)`;
        // 增加透明度变化，增强拖拽的视觉反馈
        const opacity = 1 - Math.abs(ev.deltaX) / window.innerWidth;
        this.card.nativeElement.style.opacity = opacity.toString();
      },
      onEnd: (ev) => {
        // 判断滑动距离是否达到移除阈值
        if (Math.abs(ev.deltaX) > this.swipeThreshold) {
          // 根据滑动方向，让卡片滑出对应侧的屏幕
          const finalX = ev.deltaX > 0 ? window.innerWidth : -window.innerWidth;
          this.card.nativeElement.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';
          this.card.nativeElement.style.transform = `translateX(${finalX}px)`;
          this.card.nativeElement.style.opacity = '0';
          // 滑出动画结束后，执行实际的卡片移除逻辑（比如从数组中删除）
          setTimeout(() => {
            // 这里替换成你的业务逻辑，比如 this.cards = this.cards.filter(item => item.id !== currentId)
            console.log('卡片已成功移除');
          }, 300);
        } else {
          // 未达到阈值，平滑回弹到原位
          this.card.nativeElement.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';
          this.card.nativeElement.style.transform = 'translateX(0)';
          this.card.nativeElement.style.opacity = '1';
        }
        // 动画结束后清除过渡属性，避免影响下一次拖拽的实时响应
        setTimeout(() => {
          this.card.nativeElement.style.transition = '';
        }, 300);
      },
    });
    this.gesture.enable(true);
  }
}

2. HTML模板 #

<ion-content class="ion-padding">
  <div #card class="swipe-card-container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>可侧滑移除的卡片</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        向左或向右拖拽我，超过屏幕1/3距离就会滑出移除~
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

3. SCSS样式 #

.swipe-card-container {
  width: 100%;
  touch-action: none; // 禁用浏览器默认触摸行为，避免拖拽冲突
}

ion-card {
  margin: 0;
  transition: none; // 初始状态取消过渡，保证拖拽过程的流畅性
}

关键细节说明 #

• 阈值调整：你可以根据产品需求修改swipeThreshold的比例，比如改成window.innerWidth / 4让触发移除更灵敏
• 动画优化：拖拽过程中不添加过渡，只在释放时添加，既保证拖拽的实时性，又让滑出/回弹更平滑
• 业务逻辑：卡片滑出后记得在setTimeout里处理实际的数据移除，不然只是视觉上消失，数据还在内存里

内容的提问来源于stack exchange，提问作者Salma Begum