vue3实现无缝滚动列表（大屏数据轮播场景）

<template>
  <div class="carousel-container" @mouseenter="stop" @mouseleave="start">
    <div class="carousel-wrapper" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        <!-- 内容 -->
        {{ item }}
      </div>
    </div>
    <button @click="scroll(-1)">上一项</button>
    <button @click="scroll(1)">下一项</button>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const items = ref([/* 数据列表 */]);
    const offset = ref(0);
    let intervalId;
 
    const scroll = (direction) => {
      // 根据需要调整滚动的步长
      offset.value = offset.value - direction * 100;
    };
 
    const start = () => {
      intervalId = setInterval(() => {
        scroll(1);
      }, 3000); // 每3秒滚动一次
    };
 
    const stop = () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
 
    onMounted(start);
    onUnmounted(stop);
 
    return { items, offset, scroll, start, stop };
  }
};
</script>
 
<style>
.carousel-container {
  position: relative;
  overflow: hidden;
}
.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  flex: 0 0 100px; /* 根据需要设置宽度 */
  /* 样式 */
}
</style>

这个简单的例子展示了如何使用Vue 3创建一个无缝滚动的列表。carousel-wrapper 使用 CSS transform 属性来实现平滑滚动。start 和 stop 方法分别用于控制滚动的开始和停止。scroll 方法接受一个方向参数，根据这个参数调整 offset 来实现列表的滚动。这个例子假设每个项的宽度是100像素，可以根据实际需求调整。