vue中实现列表自动无缝滚动的两种方式

1.通过控制容器的scrollTop || scrollLeft来实现自动滚动,前面写过了这里就不写了,主要讲第二种方式

2.通过控制数组中数据的位置和容器的高度||宽度来实现(这里以自下向上滚动为例)

思路:1.将第一个容器的高度置为0,同时为其添加transition来体现过渡效果

2.将数组中的第一项数据剪切掉拼接在数组的尾部

3.恢复第一个容器的高度

具体实现代码如下:

// html
  <div class="cn-component-container">
    <ul class="cn-item-list" @mouseover="stopScroll" @mouseout="startScroll" v-if="chartList.length > 0">
      <li class="cn-item" :class="{ cnuphide: index == 0 && isuphide }" v-for="(item, index) in chartList" :key="item.id">
        <div class="cn-content">
          <div class="cn">{{ item.time }}</div>
          <div class="cn">{{ item.name }}</div>
          <div class="cn">{{ item.status }}</div>
        </div>
      </li>
    </ul>
  </div>
  
// css
.cn-component-container {
  width: 320px;
  height: 100%;

  color: #f0f0f0;
  .cn-item-list {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    .cn-item {
      width: inherit;
      height: 20%;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      overflow: hidden;
      // 改变容器高度的类名
      &.cnuphide {
        height: 0px;
        transition: all 0.3s;
      }
      .cn-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .cn {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

js部分

onMounted(() => {
  if (chartList.length > 0) {
    chartList.value = JSON.parse(JSON.stringify(chartList))
    startScroll()
  }
})
// 滚动的方法
let scroll = () => {
  const copyData = JSON.parse(JSON.stringify(chartList))
  const first = copyData[0]
  const next = copyData.slice(1)
  next.push(first)
  // 开始滚动,将第一个元素的高度置为0,为其添加transition
  isuphide = true

  setTimeout(() => {
  // 重新赋值为换位置后的数据
    chartList = next
    // 恢复容器的高度
    isuphide = false
  }, 300)
}

let startScroll = () => {
  scrollTimer.value = setInterval(scroll, 3000)
}