安装vue3-seamless-scroll

npm install vue-seamless-scroll --save　　

注册组件

全局注册

import { createApp } from 'vue';
import App from './App.vue';
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
const app = createApp(App);
app.use(cssSeamlessScroll);
app.use(jsSeamlessScroll);
app.mount('#app');

单文件注册

<template>
</template>
<script>
  import { defineComponent } from "vue";
  import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
  import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
   export default defineComponent({
      components: {
        jsSeamlessScroll,
        cssSeamlessScroll
      }
   })
</script>

使用组件

<template>
  <js-seamless-scroll :datas="datas">
    <div v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </js-seamless-scroll>
  <css-seamless-scroll :datas="datas">
    <div v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
  name: "App",
  components: {
    jsSeamlessScroll,
    cssSeamlessScroll
  },
  setup() {
    const state = reactive({
      datas: [
        {
          title: "Vue3.0 无缝滚动组件展示数据第1条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第2条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第3条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第4条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第5条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第6条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第7条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第8条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第9条",
          date: Date.now(),
        },
      ]
    });
    return { ...toRefs(state) };
  },
});
</script>
<style>
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}
.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

展示效果