滚动

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

@@ -1,123 +1,65 @@
-<!-- 滚动展示 -->
 <template>
-  <div style="height: 100%; width: 100%;">
-    <div class="mb-3" style="font-size: 13px; color: #666;">最近30天已有<span class="red">68人</span>提现成功，累计提现<span class="red">￥9450</span></div>
-    <!-- 滚动 -->
-    <div
-      style="height: calc(100% - 42px); overflow: hidden; font-size: 13px;color: #333;"
-    >
-      <!-- 数据list -->
-       <div class="scrollBox" id="scrollBox">
-         <div
-           v-for="(item) in dataList"
-           :key="item[keyText] || item.name"
-           class="d-flex justify-space-between align-center"
-           style="height: 40px;"
-         >
-           <!-- 头像、用户名 -->
-           <div class="d-flex align-center">
-             <v-avatar size="30" :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
-             <div class="ml-2">{{ formatName(item.name) }}</div>
-             <!-- <div class="ml-2">{{ item.name }}</div> -->
-           </div>
-           <div class="d-flex" style="width: calc(100% - 65px);">
-             <!-- 内容 -->
-             <div class="d-flex ellipsisText mx-4" style="flex: 1;">
-               <div>推荐到</div>
-               <div class="ellipsisText ml-1" style="max-width: 100px;">{{ item.company }}</div>
-               <div class="ellipsisText ml-1" style="max-width: 60px;">{{ item.job }}</div>
-             </div>
-             <!-- 赏金 -->
-             <div>提现￥<span class="red">{{ item.money }}</span></div>
-           </div>
-         </div>
-       </div>
-    </div>
+  <div class="scroll-container" ref="scrollRef">
+    <div v-for="(item, index) in list" :key="index" style="height: 40px; line-height: 40px;">{{ item.title }}</div>
   </div>
 </template>
 
 <script setup>
-import  { ref } from 'vue'
-
+import  { onMounted, ref } from 'vue'
 defineOptions({name: 'publicRecruitment-bountyDisplay'})
-defineProps({
-  keyText: {
-    type: String,
-    default: 'id'
-  }
-})
-const avatarList = [
-  'https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300',
-  'https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726',
-  'https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg',
-  'https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg',
-  'https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg',
-  'https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg',
-  'https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
-]
-const realDataList = []
-for (let index = 0; index < 68; index++) {
-  const obj = {
-    id: 'id' + (index+1),
-    name: '用户' + (index+1),
-    avatar: avatarList[index % 7],
-    company: '某某公司' + (index+1),
-    job: '某某职位' + (index+1),
-    money: index*index*(100 - index) || 100,
-  }
-  realDataList.push(obj)
-}
-const setDataList = () => {
-  // 将数据的基数设置极大-> totalNum: 总数
-  const totalNum = 1000 // 设置长度
-  if (realDataList.length >= totalNum) {
-    return realDataList.slice(0, totalNum)
-  } else {
-    const multipleCount = Math.ceil(totalNum/realDataList.length)
-    // 创建一个长度为multipleCount的新数组，并用realDataList填充，取totalNum长度
-    const arr = realDataList.concat(...Array.from({ length: multipleCount }, () => [...realDataList]))
-    return arr.slice(0, totalNum)
-  }
-}
-let dataList = ref([]) // 渲染的数据
-if (realDataList?.length) dataList.value = setDataList()
 
-// 用户名加*号
-const formatName = (name) => {
-  if (name.length === 1) {  
-    return name // 如果名字只有一个字，则直接返回该字  
-  } else if (name.length === 2) {  
-    return name.charAt(0) + '*' // 如果名字有两个字，则返回第一个字后跟一个星号  
-  } else {  
-    return name.charAt(0) + '**' // 如果名字有多于两个字，则返回第一个字后跟两个星号  
-  }  
-}
+// 容器的 dom 节点
+const scrollRef = ref()
+// 模拟列表数据
+const dataSource = new Array(10).fill(0).map((_, index) => ({
+  title: `这是一条信息${index}`
+}))
+const list = ref([...dataSource])
+
+// 记录原始数据的长度
+const len = dataSource.length
+onMounted(() => {
+  // 滚动的距离
+  let top = 0
+  // 索引
+  let index = 0
+
+  const scroll = () => {
+    // 垂直方向滚动
+    scrollRef.value?.scrollTo({
+      top: top++
+    })
+    if (top % 40 === 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 = [...dataSource]
+      }
+    }
+    // 不断滚动
+    requestAnimationFrame(scroll)
+  }
+
+  scroll()
+})
 </script>
+
 <style lang="scss" scoped>
-.red {
-  color: red;
-}
-.ellipsisText {
-  // width: 120px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.scroll-container {
+  //   防止有滚动条出现
   overflow: hidden;
+  height: 150px;
 }
-.scrollBox {
-	position:relative;
-  animation: myMove 1500s linear infinite;
-}
-@keyframes myMove
-{
-	// from { bottom: 0%; }
-	// to { bottom: 100%; }
-  0% {
-    transform: translateY(0%);
-  }
-  100% {
-    transform: translateY(-100%);
-  }
-}
-</style>
+</style>