工程引入

yarn add vue-seamless-scroll

使用

template模板:

<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
  <table ref="scrollItemBox">
    <tr v-for="(item,index) in listData">
      <td>{{item.point}}</td>
    </tr>
   <!--没有无缝滚动的话把下面注释的解开或者多复制几份-->
<!--        <tr v-for="(item,index) in listData">-->
<!--          <td>{{item.point}}</td>-->
<!--        </tr>-->
  </table>
</vue-seamless-scroll>

js:

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    components: { //组件
      vueSeamlessScroll
    },
    //props使用数组记得是字符串
    props: {},
    data() {
      //这⾥存放数据
      return {
        listData: [...],
      };
    },
    //计算属性类似于data概念
    computed: {
      classOption() {
      //vue-seamless-scroll参数配置
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    }
  }
</script>

css:

.seamless-warp {
  width: 172px;
  height: 120px;
  /*background: rgba(0, 26, 68, 0.5);*/
  /*border-radius: 5px;*/
  overflow: hidden;
  position: absolute;
  left: 21%;
  top: 56px;
}

vue3版本

yarn add vue3-seamless-scroll

组件全局注册：

  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

单个.vue文件局部注册

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

例子：

<template>
<vue3-seamless-scroll class="table tableH" :limitScrollNum="1" :step="0.5" :hover="true" :singleHeight="36" :isWatch="true" :singleWaitTime="3000" :list="data_1" :class-option="classOption">
            <table class="w-full" cellpadding="5px">
              <tbody>
              <tr v-for="(item, index) in data_1" :key="index">
                <th>{{ item.v0 }}</th>
                <th>{{ item.v1 }}</th>
                <th>{{ item.v2 }}</th>
                <th>{{ item.v3 }}</th>
              </tr>
              </tbody>
            </table>
          </vue3-seamless-scroll>
</template>
<script setup>

import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
let data_1 = ref([
      {
        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(),
      },
    ]);
</script>

具体标签中的参数属性参考网址：www.npmjs.com/package/vue…