vue3 横向无缝滚动

要实现Vue 3中的横向无缝滚动，你可以使用CSS和Vue的动态绑定来实现。下面是一个简单的示例：

首先，在你的Vue组件中，添加一个包含要滚动的内容的div元素：

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <!-- 这里添加你要滚动的内容 -->
    </div>
  </div>
</template>

接下来，在CSS中设置滚动容器和内容的样式：

.scroll-container {
  overflow: hidden; /* 隐藏超出容器范围的内容 */
  white-space: nowrap; /* 防止内容换行 */
}

.scroll-content {
  display: inline-block; /* 内容横向排列 */
  animation: scroll 10s linear infinite; /* 使用动画实现滚动效果，10s是滚动一次的时间，可以根据需要调整 */
}

@keyframes scroll {
  0% { transform: translateX(0); } /* 初始位置 */
  100% { transform: translateX(-100%); } /* 滚动到最右边时的位置 */
}

最后，在Vue组件的`mounted`生命周期钩子中，通过JavaScript动态计算并设置滚动内容的宽度：

<template>
  <!-- ... -->
</template>

<script>
export default {
  mounted() {
    const scrollContent = document.querySelector('.scroll-content');
    const scrollContainer = document.querySelector('.scroll-container');
    scrollContent.style.width = scrollContent.scrollWidth - scrollContainer.offsetWidth + 'px';
  }
}
</script>

这样就实现了一个简单的横向无缝滚动效果。你可以根据需要自定义样式和动画，以适应你的项目需求。