Pārlūkot izejas kodu

workBuddy滚动调整

肖栋 1 dienu atpakaļ
vecāks
revīzija
d81512a9c6
2 mainītis faili ar 38 papildinājumiem un 10 dzēšanām
  1. 19 5
      src/pages/guide/index.vue
  2. 19 5
      src/pages/home/index.vue

+ 19 - 5
src/pages/guide/index.vue

@@ -149,7 +149,11 @@
                     </div>
                   </div>
                   <div class="home-guide-workbuddy-right">
-                    <div class="home-guide-workbuddy-carousel">
+                    <div
+                      class="home-guide-workbuddy-carousel"
+                      @mouseenter="pauseWorkbuddyAutoScroll"
+                      @mouseleave="resumeWorkbuddyAutoScroll"
+                    >
                       <div
                         class="home-guide-workbuddy-track"
                         :style="{ transform: `translateX(-${workbuddySlideIndex * 100}%)` }"
@@ -682,6 +686,7 @@ const guideAccessTab = ref("mcp");
 const guideToolTab = ref("qianwen");
 const workbuddySlideIndex = ref(0);
 let workbuddyAutoScrollTimer = null;
+let workbuddyAutoScrollPaused = false;
 
 const setWorkbuddySlide = (index) => {
   const total = 2;
@@ -690,20 +695,29 @@ const setWorkbuddySlide = (index) => {
 
 const stopWorkbuddyAutoScroll = () => {
   if (workbuddyAutoScrollTimer != null) {
-    clearTimeout(workbuddyAutoScrollTimer);
+    clearInterval(workbuddyAutoScrollTimer);
     workbuddyAutoScrollTimer = null;
   }
 };
 
 const startWorkbuddyAutoScroll = () => {
   stopWorkbuddyAutoScroll();
+  workbuddyAutoScrollPaused = false;
   workbuddySlideIndex.value = 0;
-  workbuddyAutoScrollTimer = setTimeout(() => {
-    workbuddyAutoScrollTimer = null;
-    workbuddySlideIndex.value = 1;
+  workbuddyAutoScrollTimer = setInterval(() => {
+    if (workbuddyAutoScrollPaused) return;
+    setWorkbuddySlide(workbuddySlideIndex.value + 1);
   }, 3000);
 };
 
+const pauseWorkbuddyAutoScroll = () => {
+  workbuddyAutoScrollPaused = true;
+};
+
+const resumeWorkbuddyAutoScroll = () => {
+  workbuddyAutoScrollPaused = false;
+};
+
 watch(
   [guideAccessTab, guideToolTab],
   ([accessTab, toolTab]) => {

+ 19 - 5
src/pages/home/index.vue

@@ -315,7 +315,11 @@
                     </div>
                   </div>
                   <div class="home-guide-workbuddy-right">
-                    <div class="home-guide-workbuddy-carousel">
+                    <div
+                      class="home-guide-workbuddy-carousel"
+                      @mouseenter="pauseWorkbuddyAutoScroll"
+                      @mouseleave="resumeWorkbuddyAutoScroll"
+                    >
                       <div
                         class="home-guide-workbuddy-track"
                         :style="{ transform: `translateX(-${workbuddySlideIndex * 100}%)` }"
@@ -952,6 +956,7 @@ const guideAccessTab = ref("mcp");
 const guideToolTab = ref("qianwen");
 const workbuddySlideIndex = ref(0);
 let workbuddyAutoScrollTimer = null;
+let workbuddyAutoScrollPaused = false;
 
 const setWorkbuddySlide = (index) => {
   const total = 2;
@@ -960,20 +965,29 @@ const setWorkbuddySlide = (index) => {
 
 const stopWorkbuddyAutoScroll = () => {
   if (workbuddyAutoScrollTimer != null) {
-    clearTimeout(workbuddyAutoScrollTimer);
+    clearInterval(workbuddyAutoScrollTimer);
     workbuddyAutoScrollTimer = null;
   }
 };
 
 const startWorkbuddyAutoScroll = () => {
   stopWorkbuddyAutoScroll();
+  workbuddyAutoScrollPaused = false;
   workbuddySlideIndex.value = 0;
-  workbuddyAutoScrollTimer = setTimeout(() => {
-    workbuddyAutoScrollTimer = null;
-    workbuddySlideIndex.value = 1;
+  workbuddyAutoScrollTimer = setInterval(() => {
+    if (workbuddyAutoScrollPaused) return;
+    setWorkbuddySlide(workbuddySlideIndex.value + 1);
   }, 3000);
 };
 
+const pauseWorkbuddyAutoScroll = () => {
+  workbuddyAutoScrollPaused = true;
+};
+
+const resumeWorkbuddyAutoScroll = () => {
+  workbuddyAutoScrollPaused = false;
+};
+
 watch(
   [guideAccessTab, guideToolTab],
   ([accessTab, toolTab]) => {