diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue index fce1e0e..db6c08a 100644 --- a/src/components/SwipeCards/index.vue +++ b/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" }; `; } diff --git a/src/pages/index/components/module/DetailCardGoodsContentList/index.vue b/src/pages/index/components/module/DetailCardGoodsContentList/index.vue index 513450f..6e76781 100644 --- a/src/pages/index/components/module/DetailCardGoodsContentList/index.vue +++ b/src/pages/index/components/module/DetailCardGoodsContentList/index.vue @@ -4,14 +4,17 @@