feat(cp排行榜): 历史榜首左右滑动切换效果实现

src/views/Ranking/Couple/index.vue

@@ -42,13 +42,19 @@
             style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
             class="scrollX"
           >
-            <div class="topList" :style="{ left: listLeftPosition }">
+            <div
+              class="topList"
+              :style="{ left: listLeftPosition }"
+              @touchstart="handleTouchStart"
+              @touchmove="handleTouchMove"
+              @touchend="handleTouchEnd"
+            >
               <!-- 右占位 -->
               <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
 
               <!-- top1情侣头像 -->
               <itemCenter
-                v-for="(item, index) in 1"
+                v-for="(item, index) in seasonTop1List"
                 style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
                 :style="{ width: index === centerIndex ? '60vw' : '40vw' }"
                 :imgUrl="imageUrl('topCoupleFrame')"
@@ -1403,28 +1409,66 @@ const myCouples = ref([]) // 伴侣列表
 const selectedCouple = ref({}) // 选中的情书对象
 const writeLetterText = ref('') // 情书内容
 const letterTextLength = ref(0) // 情书内容字数
-const seasonTop1List = ref([]) // 赛季榜Top1列表
 
 const resultShowIndex = ref(0) // 抽奖结果索引
 
+const seasonTop1List = ref([{}]) // 赛季榜Top1列表
 const listLeftPosition = ref('0') //top历史榜单
 const centerIndex = ref(0) // 默认中间项的索引为1
+// 添加触摸滑动相关变量
+const touchStartX = ref(0)
+const touchEndX = ref(0)
 
 // 计算移动到中心位置的函数
 const moveToCenter = (targetIndex) => {
   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'
 }
 
 // 选中伴侣