vue3、vue3-seamless-scroll，19个工程，3个一列，左右滚动；设置左右切换按钮进行当前显示的切换；

Vue3是一个用于构建用户界面的流行前端框架，它专注于组件化开发，使得开发者能够轻松地管理复杂的界面状态。Vue3引入了Composition API和Options API的新特性，提高了开发效率和代码组织。

Vue3 Seamless Scroll是一个基于Vue3的插件，它可以帮助你在Vue应用中实现无缝滚动的效果，特别适用于列表展示，如文章列表、产品列表等场景。当你有19个项目需要平铺在一个视图里，并且分为三列，每列可以左右滑动时，这个插件就能派上用场。通过无缝滚动，可以提供流畅的滚动体验，不会因为项目过多而导致页面断裂。

要实现这样的布局，你可以按照以下步骤操作：

1. 安装`vue3-seamless-scroll`: `npm install seamless-scroll-vue@latest`
2. 创建一个包含三个列的组件，每个列就是一个seamless-scroll容器。
3. 在每个列组件内部，使用`<ss-scroller>`标签包裹项目列表。
4. 设置滚动方向和切换逻辑，在组件内监听scroll事件，控制切换按钮的状态和列之间的切换。
5. 编写切换按钮的点击事件处理函数，更新当前显示的列索引。

下面是一个简化的示例代码：

<template>
  <div class="columns">
    <div v-for="(column, index) in 3" :key="index" class="column">
      <button @click="switchColumns(index)" :class="{ active: currentColumn === index }">切换到列{{ index + 1 }}</button>
      <ss-scroller :items="projects" :per-page="19 / 3" :direction="column === 0 ? 'left' : 'right'"></ss-scroller>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ssScroll } from 'seamless-scroll-vue';

const projects = // ...获取你的19个项目数据
const currentColumn = ref(0);
const switchColumns = (targetColumn) => {
  currentColumn.value = targetColumn;
};
</script>

<style scoped>
.columns {
  display: flex;
}

.column {
  flex: 1;
  overflow-x: auto;
}
</style>