diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue index 5647b63..8164fb5 100644 --- a/src/components/SwipeCards/index.vue +++ b/src/components/SwipeCards/index.vue @@ -11,10 +11,7 @@ @touchcancel.stop="touchCancel(index)" @transitionend="onTransitionEnd(index)" > - + @@ -65,6 +62,7 @@ const props = defineProps({ }); const DURATION = 300; +const CLICK_THRESHOLD = 8; // 点击判定的最大偏移阈值(像素) const swipering = ref(false); const animatingOut = ref(false); let reorderTimer = null; @@ -100,7 +98,7 @@ watch( ); // 触摸状态 -const touchState = ref({ startX: 0, startY: 0, moving: false }); +const touchState = ref({ startX: 0, startY: 0, moving: false, isClickCandidate: false }); const touchStart = (e, index) => { if (index !== 0 || animatingOut.value) return; @@ -109,6 +107,8 @@ const touchStart = (e, index) => { touchState.value.startX = t.clientX; touchState.value.startY = t.clientY; touchState.value.moving = true; + // 初始认为可能是点击,移动过程中如果超过阈值则取消点击 + touchState.value.isClickCandidate = true; swipering.value = true; }; @@ -118,6 +118,10 @@ const touchMove = (e, index) => { if (!t) return; const dx = t.clientX - touchState.value.startX; const dy = t.clientY - touchState.value.startY; + // 超过点击阈值则标记为不是点击 + if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) { + touchState.value.isClickCandidate = false; + } const top = list.value[0]; if (!top) return; top.x = dx; @@ -143,6 +147,16 @@ const touchEnd = (index) => { swipering.value = false; const top = list.value[0]; if (!top) return; + // 若在有效点击范围内,则触发跳转,不进行滑动逻辑 + if (touchState.value.isClickCandidate) { + top.x = 0; + top.y = 0; + top.opacity = 1; + uni.navigateTo({ + url: `/pages/goods/index?commodityId=${top.commodityId}`, + }); + return; + } const threshold = windowWidth / 4; if (Math.abs(top.x) > threshold) { const direction = top.x > 0 ? 1 : -1; @@ -203,7 +217,7 @@ const transformStyle = (index, card) => { } // 预览层:轻微位移与缩放,确保连贯顶上 const previewScales = [1, 0.98, 0.96]; - const previewOffsets = [0, 8, 16]; + const previewOffsets = [0, 16, 16]; const scale = previewScales[index] ?? 0.94; const y = previewOffsets[index] ?? 24; return { @@ -213,10 +227,10 @@ const transformStyle = (index, card) => { // 去下单 const placeOrderHandle = (item) => { - checkToken().then(() => { - uni.navigateTo({ - url: `/pages/goods/index?commodityId=${item.commodityId}`, - }); + console.log("去下单", item); + + uni.navigateTo({ + url: `/pages/goods/index?commodityId=${item.commodityId}`, }); }; diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss index 4a1e1fa..f0bb1eb 100644 --- a/src/components/SwipeCards/styles/index.scss +++ b/src/components/SwipeCards/styles/index.scss @@ -1,5 +1,5 @@ .card { - height: 320px; + height: 300px; } .card-item {