基于Vue3+TypeScript實現(xiàn)抖音式卡片滑動交互功能

更新時間：2026年06月03日 09:00:43 作者：龍蝦不加班

本文介紹如何用 Vue 3 + TypeScript 實現(xiàn)類似抖音的卡片滑動交互,應用于單詞記憶場景,完整方案包含手勢識別、堆疊動畫、實時反饋和狀態(tài)管理,需要的朋友可以參考下

效果拆解

目標效果：屏幕中央一張主卡片，后方隱約可見兩張堆疊卡片。手指左滑（不認識）或右滑（認識），卡片跟隨手指移動并旋轉，松開后飛出屏幕，下一張頂上。

核心需求：

3 張可見卡片（z-index 分層，縮放遞減）
Pointer Events 手勢跟蹤
滑動過程實時視覺反饋（顏色、圖標、標簽）
閾值判斷 + 飛出動畫 + 隊列循環(huán)

卡片堆疊布局

三張卡片用 v-for 渲染，通過 index 控制層級和變形：

const stackStyle = (stackIndex: number) => {
  if (stackIndex >= 3) return { display: 'none' }

  const scaleMap = [1, 0.95, 0.90]      // 越靠后越小
  const yOffsetMap = [0, 12, 24]         // 越靠后越向下
  const zIndexMap = [30, 29, 28]         // 越靠前越高

  return {
    zIndex: zIndexMap[stackIndex],
    transform: `scale(${scaleMap[stackIndex]}) translateY(${yOffsetMap[stackIndex]}px)`,
    transition: stackIndex === 0 && isDragging.value
      ? 'none'                           // 拖拽中不要過渡
      : 'transform 0.35s ease'
  }
}

數(shù)組用 ref<Word[]>([]) 存儲當前隊列。隊列用完時自動從后端拉取下一批。

Pointer Events 手勢跟蹤

用 Pointer Events 而非 Touch Events，因為 Pointer Events 同時支持觸屏和鼠標，方便開發(fā)調試：

const SWIPE_THRESHOLD = 72  // px，超過此值觸發(fā)飛出
const isDragging = ref(false)
const dragX = ref(0)

const onPointerDown = (e: PointerEvent) => {
  isDragging.value = true
  startX.value = e.clientX
  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
}

const onPointerMove = (e: PointerEvent) => {
  if (!isDragging.value) return
  dragX.value = e.clientX - startX.value
}

const onPointerUp = () => {
  if (!isDragging.value) return
  isDragging.value = false

  if (Math.abs(dragX.value) > SWIPE_THRESHOLD) {
    // 觸發(fā)飛出
    const direction = dragX.value > 0 ? 'right' : 'left'
    flyAway(direction)
  } else {
    // 復位
    dragX.value = 0
  }
}

關鍵點：setPointerCapture 確保手指滑出元素邊界后依然能跟蹤。不用這個 API 的話，手指移出卡片范圍就會丟失 tracking。

實時視覺反饋

根據拖拽距離動態(tài)計算顏色和圖標透明度：

const feedbackColor = computed(() => {
  const ratio = Math.min(Math.abs(dragX.value) / SWIPE_THRESHOLD, 1)
  if (dragX.value > 0) {
    return `rgba(34, 197, 94, ${ratio * 0.3})`  // 綠色 = 認識
  } else if (dragX.value < 0) {
    return `rgba(239, 68, 68, ${ratio * 0.3})`  // 紅色 = 不認識
  }
  return 'transparent'
})

const checkIconOpacity = computed(() =>
  dragX.value > 0 ? Math.min(dragX.value / SWIPE_THRESHOLD, 1) : 0
)

const crossIconOpacity = computed(() =>
  dragX.value < 0 ? Math.min(-dragX.value / SWIPE_THRESHOLD, 1) : 0
)

拖拽距離與閾值的比值驅動所有視覺過渡。不需要動畫庫，computed 全搞定。

飛出動畫 + 隊列推進

飛出用 CSS transition + 最終位置計算：

const flyAway = (direction: 'left' | 'right') => {
  const targetX = direction === 'right' ? window.innerWidth * 1.5 : -window.innerWidth * 1.5
  flyX.value = targetX
  flyRotation.value = direction === 'right' ? 20 : -20

  // 記錄結果
  const result = direction === 'right' ? 'known' : 'forgotten'
  submitReview(currentWord.value.id, result)

  // 動畫結束后移除當前詞，推進隊列
  setTimeout(() => {
    words.value.shift()
    flyX.value = 0
    flyRotation.value = 0
    dragX.value = 0
    // 隊列快用完時預加載
    if (words.value.length < 5) fetchMoreWords()
  }, 350)
}

飛出期間新卡片已經在原來的第二張位置就位，視覺上無縫銜接。

四隊列切換

高頻詞、大綱詞、綜合、錯詞鞏固，四種模式對應不同 API 參數(shù)：

type QueueMode = 'high' | 'outline' | 'mixed' | 'wrong'

const switchQueue = async (mode: QueueMode) => {
  currentMode.value = mode
  words.value = []
  await fetchWords(mode)
}

錯詞隊列的每個詞帶有復習記錄，后端根據復習次數(shù)和上次復習時間動態(tài)計算下次推送時機，實現(xiàn)間隔重復。

性能注意事項

事件監(jiān)聽用 passive: false：Pointer Events 需要 preventDefault 防止頁面滾動，所以要顯式設置 { passive: false }
動畫用 transform 而非 left/top：transform 走合成層，不觸發(fā)重排
隊列預加載：剩 5 張時自動拉取，滑動體驗零等待

完整代碼較長，核心邏輯即上面這些。這個交互方案可以直接復用到任何需要卡片滑動判斷的場景——背單詞、刷題、審閱、相親……

在線體驗：m.dobell.top，打開就能看到效果。

以上就是基于Vue3+TypeScript實現(xiàn)抖音式卡片滑動交互功能的詳細內容，更多關于Vue3 TypeScript抖音式卡片滑動交互的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: