Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/views/personal/myPublicRecruitment/components/bountyDisplay.vue

@@ -1,7 +1,6 @@
 <!-- 滚动展示 -->
 <template>
-  <!-- height从外部传入 -->
-  <div style="height: 100%; width: 100%;">
+  <div style="height: 100%; width: 100%;" @mouseover="handleMouseover" @mouseleave="handleMouseleave">
     <div class="mb-3" style="font-size: 13px; color: #666;">最近30天已有<span class="red">68人</span>提现成功，累计提现<span class="red">￥9450</span></div>
     <!-- 滚动 -->
     <div
@@ -82,45 +81,42 @@ const formatName = (name) => {
 }
 
 // 滚动实现代码部分
-const dataItemHeight = 40
-// 容器的 dom 节点
-const scrollRef = ref()
-// // 模拟列表数据
-const list = ref([...listSource])
+const dataItemHeight = 40 // 单位高度
+const scrollRef = ref() // 容器的 dom 节点
+const list = ref([...listSource]) // 滚动数据列表
+let len = listSource.length // 记录原始数据的长度
+const scrollItem = ref(null)
+let top = 0 // 滚动的距离
+let index = 0 // 索引
+const scroll = () => {
+  // 垂直方向滚动
+  scrollRef.value?.scrollTo({
+    top: top++,
+  })
+  if (top % dataItemHeight === 0) {
+    // 哪一项滚不见了，就拿这一项 push 到列表中
+    const target = list.value[index]
+    if (target) list.value.push(target)
 
-// 记录原始数据的长度
-let len = listSource.length
-onMounted(() => {
-  // 滚动的距离
-  let top = 0
-  // 索引
-  let index = 0
-  const scroll = () => {
-    // 垂直方向滚动
-    scrollRef.value?.scrollTo({
-      top: top++,
-    })
-    if (top % dataItemHeight === 0) {
-      // 哪一项滚不见了，就拿这一项 push 到列表中
-      const target = list.value[index]
-      if (target) list.value.push(target)
-
-      if (index < len - 1) {
-        // 不断递增
-        index++
-      } else {
-        // 刚好滚动完一轮，重新来过，初始化数据
-        top = 0
-        index = 0
-        scrollRef.value?.scrollTo({
-          top: 0,
-        })
-        list.value = [...listSource]
-      }
+    if (index < len - 1) {
+      // 不断递增
+      index++
+    } else {
+      // 刚好滚动完一轮，重新来过，初始化数据
+      top = 0
+      index = 0
+      scrollRef.value?.scrollTo({
+        top: 0,
+      })
+      list.value = [...listSource]
     }
-    // 不断滚动
-    requestAnimationFrame(scroll)
   }
+  // 不断滚动
+  setTimeout(() => { scrollItem.value = requestAnimationFrame(scroll) }, 20) // 延迟滚动-> 20 : 1px。即:1秒滚动50px
+}
+const handleMouseover = () => { cancelAnimationFrame(scrollItem.value) } //暂停滚动
+const handleMouseleave = () => { scroll() } // 恢复滚动
+onMounted(() => {
   // 如果数据长度形成的总高度少于容器高度，不设置滚动
   const clientHeight = scrollRef.value?.clientHeight
   if (len*dataItemHeight > clientHeight) {
@@ -131,7 +127,7 @@ onMounted(() => {
       list.value = listSource
       len = listSource.length
     }
-    scroll()
+    scroll() // 启动滚动
   }
 })
 </script>