diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 0e89717..8d4090c 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -42,13 +42,19 @@
style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
class="scrollX"
>
-
+
{
if (centerIndex.value == targetIndex) return // 如果当前索引和目标索引相同,则不需要移动
- // 每个项目的宽度(包括间距)
- const itemWidth = 40 // vw
- const itemSpacing = 2 // vw
-
- // 计算目标元素的偏移量
- const targetOffset = (itemWidth + itemSpacing) * targetIndex
-
- // 由于我们使用的是left属性,负值向左移动
- listLeftPosition.value = targetOffset + 'vw'
-
centerIndex.value = targetIndex
+ updatePosition() // 更新位置
+}
+
+// 触发触摸开始事件
+const handleTouchStart = (event) => {
+ touchStartX.value = event.touches[0].clientX
+}
+
+// 触发触摸移动事件
+const handleTouchMove = (event) => {
+ touchEndX.value = event.touches[0].clientX
+}
+
+// 触发触摸结束事件
+const handleTouchEnd = () => {
+ if (!touchStartX.value) return
+
+ let minSwipeDistance = 50 //x轴最小滑动距离
+ let distance = touchEndX.value - touchStartX.value // 左滑<0 右滑>0
+ let isLeftSwipe = distance < -minSwipeDistance // 满足左滑
+ let isRightSwipe = distance > minSwipeDistance // 满足右滑
+
+ if (isLeftSwipe) {
+ // 左滑
+ if (centerIndex.value > 0) {
+ moveToCenter(centerIndex.value - 1)
+ }
+ } else if (isRightSwipe) {
+ // 右滑
+ if (centerIndex.value < seasonTop1List.value.length - 1) {
+ moveToCenter(centerIndex.value + 1)
+ }
+ }
+
+ // 重置触摸变量
+ touchStartX.value = 0
+ touchEndX.value = 0
+}
+
+// 更新位置
+const updatePosition = () => {
+ const itemWidth = 40 // vw,根据您的代码中每个项目宽度
+ const itemSpacing = 2 // vw,根据您的代码中项目间距
+ const targetOffset = (itemWidth + itemSpacing) * centerIndex.value
+ listLeftPosition.value = targetOffset + 'vw'
}
// 选中伴侣