feat: 相关商品问题修复

src/components/SwipeCards/index.vue

@@ -27,8 +27,13 @@ const startX = ref(0);
 const startY = ref(0);
 const moveX = ref(0);
 const moveY = ref(0);
+// 原始位移用于判定手势，不参与频繁样式更新以减少卡顿
+const rawMoveX = ref(0);
+const rawMoveY = ref(0);
 const currentIndex = ref(null);
 const isHorizontal = ref(false); // 是否为水平滑动
+// 简易节流：避免每次 touchmove 都触发样式更新
+let dragTicking = false;
 
 const visibleCards = computed(() => cards.value.slice(0, 3));
 
@@ -43,15 +48,15 @@ function touchStart(e, index) {
 function touchMove(e, index) {
   if (currentIndex.value !== index) return;
   const touch = e.touches[0];
-  moveX.value = touch.clientX - startX.value;
-  moveY.value = touch.clientY - startY.value;
+  rawMoveX.value = touch.clientX - startX.value;
+  rawMoveY.value = touch.clientY - startY.value;
 
   // 第一次移动时判断方向
   if (
     !isHorizontal.value &&
-    (Math.abs(moveX.value) > 10 || Math.abs(moveY.value) > 10)
+    (Math.abs(rawMoveX.value) > 10 || Math.abs(rawMoveY.value) > 10)
   ) {
-    if (Math.abs(moveX.value) > Math.abs(moveY.value)) {
+    if (Math.abs(rawMoveX.value) > Math.abs(rawMoveY.value)) {
       isHorizontal.value = true;
     }
   }
@@ -59,19 +64,32 @@ function touchMove(e, index) {
   // 如果是水平滑动，阻止页面滚动
   if (isHorizontal.value) {
     e.preventDefault?.();
+    // 将样式更新按 16ms 节流，降低渲染压力
+    if (!dragTicking) {
+      dragTicking = true;
+      setTimeout(() => {
+        moveX.value = rawMoveX.value;
+        moveY.value = rawMoveY.value;
+        dragTicking = false;
+      }, 16);
+    }
   }
 }
 
 function touchEnd(e, index) {
   if (!isHorizontal.value) return; // 如果不是水平滑动，不处理
-  if (Math.abs(moveX.value) > props.threshold) {
-    const direction = moveX.value > 0 ? 1 : -1;
+  const deltaX = Math.abs(rawMoveX.value);
+  const deltaY = Math.abs(rawMoveY.value);
+  if (deltaX > props.threshold && deltaX >= deltaY) {
+    const direction = rawMoveX.value > 0 ? 1 : -1;
     animateSwipe(index, direction);
   } else {
     resetCard(index);
   }
   moveX.value = 0;
   moveY.value = 0;
+  rawMoveX.value = 0;
+  rawMoveY.value = 0;
   currentIndex.value = null;
 }
 
@@ -108,7 +126,7 @@ function cardStyle(index, card) {
       : `translate(0, ${translateY}rpx)`;
   const rotate =
     currentIndex.value === index
-      ? `rotate(${moveX.value / 15}deg)`
+      ? `rotate(${moveX.value / 24}deg)`
       : "rotate(0)";
 
   let opacity = 1;
@@ -129,7 +147,11 @@ function cardStyle(index, card) {
     transform: ${transform};
     opacity: ${opacity};
     transition: ${
-      card.swiped ? "all 0.3s ease-out" : "transform 0.2s ease-out"
+      card.swiped
+        ? "all 0.3s ease-out"
+        : currentIndex.value === index && isHorizontal.value
+        ? "none"
+        : "transform 0.2s ease-out"
     };
   `;
 }