vuecli3无缝滚动横向

Vue CLI 3 本身是一个脚手架工具，用于快速构建 Vue.js 应用程序，但它并不直接提供“无缝滚动横向”的功能。不过，在 Vue 组件中实现这种效果通常需要结合 CSS 和 JavaScript 来完成。你可以通过以下步骤在项目中实现：

1. 使用 `v-for` 指令在一个容器元素上遍历数据，这个元素将作为滑动的容器。

<div class="scroll-container" v-for="(item, index) in items">
  <div :key="index">{{ item }}</div>
</div>

2. 添加 CSS 以启用水平滚动，并消除滚动条对视觉的影响。这通常涉及到 `.scroll-container` 的样式设置：

.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-scrollbar: none; /* 隐藏默认滚动条 */
}

3. 如果你想禁止用户手动滚动，可以添加阻止点击穿透的行为：

<script>
export default {
  methods: {
    preventScroll(e) {
      if (e.targetTouches && e.targetTouches.length > 0) {
        e.preventDefault();
      }
    },
  },
  mounted() {
    document.addEventListener('touchmove', this.preventScroll);
  },
  beforeDestroy() {
    document.removeEventListener('touchmove', this.preventScroll);
  },
};
</script>

这样就实现了基本的无缝滚动横向效果。如果你有更复杂的需求，比如响应式或者动画过渡，可能还需要额外的库如 vue-smooth-scroll 或者自定义动画函数。