滚动展示

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

@@ -6,7 +6,7 @@
     <div
       class="scroll-container"
       ref="scrollRef"
-      style="height: calc(100% - 42px); overflow: hidden; font-size: 13px;color: #333;"
+      style="height: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;"
     >
       <!-- 数据list -->
       <div
@@ -57,12 +57,12 @@ const avatarList = [
   '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 listSource = []
-for (let index = 0; index < 10; index++) {
+let listSource = []
+for (let index = 0; index < 68; index++) {
   const obj = {
     id: 'id' + (index+1),
-    // name: '用户' + (index+1),
-    name: (index+1),
+    name: '用户' + (index+1),
+    // name: (index+1),
     avatar: avatarList[index % 7],
     company: '某某公司' + (index+1),
     job: '某某职位' + (index+1),
@@ -93,7 +93,7 @@ const scrollRef = ref()
 const list = ref([...listSource])
 
 // 记录原始数据的长度
-const len = listSource.length
+let len = listSource.length
 onMounted(() => {
   // 滚动的距离
   let top = 0
@@ -127,23 +127,18 @@ onMounted(() => {
   }
   // 如果数据长度形成的总高度少于容器高度，不设置滚动
   const clientHeight = scrollRef.value?.clientHeight
-  if (len*dataItemHeight > clientHeight) scroll()
+  if (len*dataItemHeight > clientHeight) {
+    if ((len - 1)*dataItemHeight < clientHeight) {
+      // 如果clientHeight刚好大于len*dataItemHeight，但不满足(len+1)*dataItemHeight会出现抖动。
+      // 解决方法：将数据复制一份
+      listSource = listSource.concat(...Array.from({ length: 1 }, () => [...listSource]))
+      list.value = listSource
+      len = listSource.length
+    }
+    scroll()
+  }
+  // if (len*dataItemHeight > clientHeight) scroll()
 })
- 
-// const setDataList = () => { // 设置数据的基数
-//   // -> totalNum: 总数
-//   const totalNum = 1000 // 设置长度
-//   if (listSource.length >= totalNum) {
-//     // return listSource.slice(0, totalNum)
-//   } else {
-//     const multipleCount = Math.ceil(totalNum/listSource.length)
-//     // 创建一个长度为multipleCount的新数组，并用realDataList填充，取totalNum长度
-//     const arr = listSource.concat(...Array.from({ length: multipleCount }, () => [...listSource]))
-//     // return arr.slice(0, totalNum)
-//     return arr
-//   }
-// }
-// if (listSource?.length) list.value = setDataList()
 </script>
 <style lang="scss" scoped>
 .red {