1.安装插件依赖

npm install vue3-seamless-scroll --save

2.main.ts引入

import vue3SeamlessScroll from "vue3-seamless-scroll";
app.use(vue3SeamlessScroll)

3.使用示例

<vue3-seamless-scroll  :list="tableData1"  class="scroll" :step="0.5" v-if="tableData1.length > 4">
        <div class="allParkCars">
            <a-row v-for="(item,index) in tableData1" :class="(index+1)%2 != 0 ? 'rowItem oddRow' : 'rowItem'">
              <a-col :span="6">{{item.carNo}}</a-col>
              <a-col :span="4">{{item.area}}</a-col>
              <a-col :span="4">{{item.type}}</a-col>
              <a-col :span="5">{{item.enterTime}}</a-col>
              <a-col :span="5">{{item.stayTime}}</a-col>
            </a-row>
        </div>
      </vue3-seamless-scroll>

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";


.scroll{
  margin-top: 10px;
  width: 100%;
  max-height: 220px;
  overflow: hidden;
}

VUE2引入自动滚动轮播插件vue-seamless-scroll：
https://blog.csdn.net/qq_28170105/article/details/125017400

1.安装插件依赖

npm install vue-seamless-scroll --save

2.main.js引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll);

3.使用示例

 <vue-seamless-scroll  :data="tableData1"  :class-option="optionHover" class="seamless-warp" v-if="tableData1.length > 4">
                <div class="allParkCars">
                    <el-row v-for="(item,index) in tableData1" :class="(index+1)%2 != 0 ? 'rowItem oddRow' : 'rowItem'">
                      <el-col :span="6">{{item.carNo}}</el-col>
                      <el-col :span="4">{{item.area}}</el-col>
                      <el-col :span="4">{{item.type}}</el-col>
                      <el-col :span="5">{{item.enterTime}}</el-col>
                      <el-col :span="5">{{item.stayTime}}</el-col>
                    </el-row>
                </div>
              </vue-seamless-scroll>
            <div class="allParkCars" v-else>
                <el-row v-for="(item,index) in tableData1" :key="index" :class="(index+1)%2 != 0 ? 'rowItem oddRow' : 'rowItem'">
                    <el-col :span="6">{{item.carNo}}</el-col>
                    <el-col :span="4">{{item.area}}</el-col>
                    <el-col :span="4">{{item.type}}</el-col>
                    <el-col :span="5">{{item.enterTime}}</el-col>
                    <el-col :span="5">{{item.stayTime}}</el-col>
                </el-row>
            </div>
<script>
data(){
    return{
 tableData1:[
                {
                    carNo: '苏A 7N5E1',
                    area: '南区',
                    type: '一类',
                    enterTime: '10:20:25',
                    stayTime:'13分25秒'
                },
                {
                    carNo: '苏A 7N5E2',
                    area: '南区',
                    type: '一类',
                    enterTime: '10:20:25',
                    stayTime:'13分25秒'
                },
                {
                    carNo: '苏A 7N5E3',
                    area: '南区',
                    type: '一类',
                    enterTime: '10:20:25',
                    stayTime:'13分25秒'
                },
                {
                    carNo: '苏A 7N5E4',
                    area: '南区',
                    type: '一类',
                    enterTime: '10:20:25',
                    stayTime:'13分25秒'
                },
            ],
    }
}


computed: {
        optionHover() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 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>
<style  lang="scss">
.seamless-warp{
    margin-top: 10px;
    width: 100%;
    height: 125px;
    overflow: hidden;
}
</style>