refactor(轮播组件): 重构新闻轮播逻辑实现无缝滚动

移除克隆项动态增减逻辑，改用固定克隆首尾项的方式简化轮播位置更新和动画控制逻辑

refactor(轮播组件): 重构新闻轮播逻辑实现无缝滚动
移除克隆项动态增减逻辑，改用固定克隆首尾项的方式简化轮播位置更新和动画控制逻辑
hookehuyr
Commit e4072accb5269899f301244a528485dd2c69cb7e e4072acc 1 parent dbd3f403
Showing 1 changed file with 45 additions and 65 deletions
src/views/Home.vue
--- a/src/views/Home.vue
View file @e4072ac
+++ b/src/views/Home.vue
View file @e4072ac
@@ -118,7 +118,7 @@
         <!-- 轮播容器 -->
         <div class="news-carousel-container">
           <div class="news-carousel" ref="newsCarousel">
-            <div class="news-item" v-for="(item, index) in newsItems" :key="index" @click="handleNewsClick(item)">
+            <div class="news-item" v-for="(item, index) in displayNewsItems" :key="index" @click="handleNewsClick(item)">
               <div class="news-image">
                 <img :src="item.image" :alt="item.title">
               </div>
@@ -136,14 +136,12 @@
               src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8A@2x.png"
               alt="上一张"
               @click="prevSlide"
-              :class="{ disabled: currentSlide === 0 }"
             >
             <img
               class="nav-btn next-btn"
               src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8B@2x.png"
               alt="下一张"
               @click="nextSlide"
-              :class="{ disabled: isTransitioning }"
             >
           </div>
         </div>
@@ -276,6 +274,11 @@ onMounted(async () => {
       image: item.photo || '',
       post_link: item.post_link || '',
     })) || [];
+
+    // 初始化轮播位置
+    nextTick(() => {
+      updateCarouselPosition(false)
+    })
   }
 })
@@ -317,59 +320,61 @@ const viewMore = (type, item) => {
 // 新闻轮播相关逻辑
 const newsCarousel = ref(null)
-const currentSlide = ref(0)
+const currentSlide = ref(1) // 从1开始，因为0是克隆的最后一项
 const isTransitioning = ref(false)
-const hasTailClone = ref(false)
 // 新闻数据
 const newsItems = ref([])
-
+const displayNewsItems = computed(() => {
-// 原始长度用于判断“最后一张”的逻辑
+  if (newsItems.value.length === 0) {
-const initialLength = ref(newsItems.value.length)
+    return []
+  }
+  // 克隆第一项和最后一项以实现无缝滚动
+  return [newsItems.value[newsItems.value.length - 1], ...newsItems.value, newsItems.value[0]]
+})
 // 上一张
 const prevSlide = () => {
-  if (currentSlide.value > 0) {
+  if (isTransitioning.value) return
-    currentSlide.value--
+  isTransitioning.value = true
-    // 离开最后一张时移除尾部克隆，避免轨道长度异常
+  currentSlide.value--
-    if (hasTailClone.value && currentSlide.value < initialLength.value - 1) {
+  updateCarouselPosition()
-      newsItems.value.pop()
+
-      hasTailClone.value = false
+  if (currentSlide.value === 0) {
-    }
+    setTimeout(() => {
-    updateCarouselPosition()
+      isTransitioning.value = false
+      currentSlide.value = newsItems.value.length
+      updateCarouselPosition(false) // 无动画地跳转
+    }, 300) // 等待过渡动画完成
+  } else {
+    setTimeout(() => {
+      isTransitioning.value = false
+    }, 300)
   }
 }
 // 下一张
 const nextSlide = () => {
   if (isTransitioning.value) return
-
+  isTransitioning.value = true
-  // 若还未到原始最后一张，正常前进
+  currentSlide.value++
-  if (currentSlide.value < initialLength.value - 1) {
+  updateCarouselPosition()
-    currentSlide.value++
+
-    // 当抵达原始最后一张时，预先追加尾部克隆以填充右侧空白
+  if (currentSlide.value === displayNewsItems.value.length - 1) {
-    if (currentSlide.value === initialLength.value - 1 && !hasTailClone.value) {
+    setTimeout(() => {
-      newsItems.value.push(newsItems.value[0])
+      isTransitioning.value = false
-      hasTailClone.value = true
+      currentSlide.value = 1
-    }
+      updateCarouselPosition(false) // 无动画地跳转
-    isTransitioning.value = true
+    }, 300) // 等待过渡动画完成
-    attachTransitionEndOnce(false)
-    updateCarouselPosition()
   } else {
-    // 处于原始最后一张：使用尾部克隆进行无缝循环
+    setTimeout(() => {
-    if (!hasTailClone.value) {
+      isTransitioning.value = false
-      newsItems.value.push(newsItems.value[0])
+    }, 300)
-      hasTailClone.value = true
-    }
-    currentSlide.value++
-    isTransitioning.value = true
-    attachTransitionEndOnce(true)
-    updateCarouselPosition()
   }
 }
-// 更新轮播位置：按卡片宽度+间距进行像素级位移
+// 更新轮播位置
-const updateCarouselPosition = () => {
+const updateCarouselPosition = (animated = true) => {
   const carouselEl = newsCarousel.value
   if (!carouselEl) return
@@ -384,35 +389,10 @@ const updateCarouselPosition = () => {
   const gapPx = parseFloat(gapStr) || 8
   const distance = currentSlide.value * (itemWidth + gapPx)
+  carouselEl.style.transition = animated ? 'transform 0.3s ease' : 'none'
   carouselEl.style.transform = `translateX(-${distance}px)`
 }
-// 动画结束后复位（如处于无缝循环场景）
-const attachTransitionEndOnce = (looping) => {
-  const el = newsCarousel.value
-  if (!el) {
-    isTransitioning.value = false
-    return
-  }
-  const handler = () => {
-    el.removeEventListener('transitionend', handler)
-    if (looping) {
-      const prevTransition = el.style.transition
-      el.style.transition = 'none'
-      // 移除临时克隆，重置到第一张
-      newsItems.value.pop()
-      hasTailClone.value = false
-      currentSlide.value = 0
-      updateCarouselPosition()
-      // 强制重绘后恢复过渡
-      void el.offsetHeight
-      el.style.transition = prevTransition || 'transform 0.3s ease'
-    }
-    isTransitioning.value = false
-  }
-  el.addEventListener('transitionend', handler)
-}
-
 // 处理新闻点击事件
 const handleNewsClick = (item) => {
   // 这里可以添加跳转到新闻详情页面的逻辑