抖动

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

@@ -13,7 +13,7 @@
         v-for="(item) in list"
         :key="item[keyText] || item.name"
         class="d-flex justify-space-between align-center"
-        style="height: 40px;"
+        :style="`height: ${dataItemHeight}px;`"
       >
         <!-- 头像、用户名 -->
         <div class="d-flex align-center">
@@ -58,10 +58,11 @@ const avatarList = [
   '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 < 68; index++) {
+for (let index = 0; index < 10; index++) {
   const obj = {
     id: 'id' + (index+1),
-    name: '用户' + (index+1),
+    // name: '用户' + (index+1),
+    name: (index+1),
     avatar: avatarList[index % 7],
     company: '某某公司' + (index+1),
     job: '某某职位' + (index+1),
@@ -72,7 +73,9 @@ for (let index = 0; index < 68; index++) {
 
 // 用户名加*号
 const formatName = (name) => {
-  if (name.length === 1) {  
+  if (!name.length) {
+    return name
+  } else if (name.length === 1) {  
     return name // 如果名字只有一个字，则直接返回该字  
   } else if (name.length === 2) {  
     return name.charAt(0) + '*' // 如果名字有两个字，则返回第一个字后跟一个星号  
@@ -82,6 +85,7 @@ const formatName = (name) => {
 }
 
 // 滚动实现代码部分
+const dataItemHeight = 40
 // 容器的 dom 节点
 const scrollRef = ref()
 // // 模拟列表数据
@@ -100,7 +104,7 @@ onMounted(() => {
     scrollRef.value?.scrollTo({
       top: top++,
     })
-    if (top % 40 === 0) {
+    if (top % dataItemHeight === 0) {
       // 哪一项滚不见了，就拿这一项 push 到列表中
       const target = list.value[index]
       if (target) list.value.push(target)
@@ -122,10 +126,8 @@ onMounted(() => {
     requestAnimationFrame(scroll)
   }
   // 如果数据长度形成的总高度少于容器高度，不设置滚动
-  // scrollRef.value?.style
-  // console.log('1', scrollRef.value)
-  // debugger
-  scroll()
+  const clientHeight = scrollRef.value?.clientHeight
+  if (len*dataItemHeight > clientHeight) scroll()
 })
  
 // const setDataList = () => { // 设置数据的基数