vue3项目div横向自动循环滚动

在Vue3项目中，要创建一个div元素进行横向自动循环滚动，你可以使用`v-for`指令配合CSS来实现。首先，在HTML部分，创建一个动态生成的列表：

<template>
  <div class="scrolling-container">
    <transition-group tag="div" name="slide" v-for="(item, index) in items" :key="index">
      <div :class="{ active: index === currentSlide }">{{ item }}</div>
    </transition-group>
  </div>
</template>

然后，在CSS部分，添加`.scrolling-container`, `.slide` 和 `.active` 类来实现动画效果和滚动：

.scrolling-container {
  overflow-x: auto;
  white-space: nowrap;
}

.slide {
  display: inline-block;
  width: calc(100% / var(--items-per-scroll));
  transition: transform 0.5s ease-in-out;
}

.active {
  position: relative;
  z-index: 1;
}

/* 当屏幕宽度不足以显示所有元素时，设置容器最大宽度 */
@media (max-width: ...) {
  .scrolling-container {
    max-width: ...px;
  }
}

最后，在JavaScript部分设置变量`items`, `currentSlide`，以及更新滑动状态：

<script setup>
import { ref } from 'vue';

const items = ['Item 1', 'Item 2', '...', 'Item N'];
let currentSlide = ref(0);
// 添加滚动事件处理函数
function scrollHandler() {
  // 滑动到下一个/上一个元素
  if (currentSlide.value + 1 < items.length) {
    currentSlide.value += 1;
  } else if (currentSlide.value > 0) {
    currentSlide.value -= items.length;
  }
}
</script>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', scrollHandler);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', scrollHandler);
  }
};
</script>

这样，当用户滚动页面时，div元素会按照设定的规则自动循环滚动。记得替换`...`和`...px`为你实际需要的值和屏幕宽度条件。