1、安装，并在main.js全局引入插件
//安装命令
npm install vue-seamless-scroll --save//引入列表滚动插件
import vueSeamlessScroll from 'vue-seamless-scroll' // 循环滚动
Vue.use(vueSeamlessScroll)2、 在页面中使用
//dom
<template><div><div class="tableItem"><table class="table"><thead><tr style=" background: rgb(18,34,59);"><th style="width:10%;">序号</th><th style="width:15%;">病案号</th><th style="width:10%;">姓名</th><th style="width:20%;">出院科室</th><th style="width:20%;">出院时间</th><th style="width:15%;">住院医师</th><th style="width:10%;">天数</th></tr></thead></table><vue-seamless-scroll:data="caseTableData"class="seamless-warp"style="width: 100%":class-option="classOption"><table class="table"><thead><tr style=" background: rgb(18,34,59) !important;display:none;"><th style="width:10%;">序号</th><th style="width:15%;">病案号</th><th style="width:10%;">姓名</th><th style="width:20%;">出院科室</th><th style="width:20%;">出院时间</th><th style="width:15%;">住院医师</th><th style="width:10%;">天数</th></tr></thead><tbody><tr v-for="(item,index) in caseTableData" :key="item.id"><td style="width:10%;color:rgb(251,207,22);">{{index + 1}}</td><td style="width:15%;">{{item.medicalCaseNum ? item.medicalCaseNum :'-'}}</td><td style="width:10%;">{{item.name}}</td><td style="width:20%;">{{item.dischargeDepartment}}</td><td style="width:20%;">{{item.dischargeDate}}</td><td style="width:15%;">{{item.residentPhysician}}</td><td style="width:10%;">{{item.hospitalStayDaysActual ? item.hospitalStayDaysActual :'-'}}</td></tr></tbody></table></vue-seamless-scroll></div></div>
</template><script>
export default {data(){return {caseTableData:[{medicalCaseNum:2024090301,name:'张三',dischargeDepartment:'内分泌科', dischargeDate:'2023-09-03', residentPhysician:'李医生', hospitalStayDaysActual:7,},{medicalCaseNum:2024090302,name:'张二三',dischargeDepartment:'内分泌科1', dischargeDate:'2023-09-02', residentPhysician:'李医生', hospitalStayDaysActual:5,},{medicalCaseNum:2024090303,name:'张二三',dischargeDepartment:'内分泌科1', dischargeDate:'2023-09-02', residentPhysician:'李医生', hospitalStayDaysActual:5,},{medicalCaseNum:2024090304,name:'王五',dischargeDepartment:'内分泌科2', dischargeDate:'2023-09-02', residentPhysician:'赵医生', hospitalStayDaysActual:8,},{medicalCaseNum:2024090305,name:'王四五',dischargeDepartment:'内分泌科2', dischargeDate:'2023-09-02', residentPhysician:'蒙医生', hospitalStayDaysActual:4,},],}},computed: {classOption () { //配置项return {step: 0.5, // 数值越大速度滚动越快limitMoveNum: this.caseTableData.length, // 开始无缝滚动的数据量 this.tableListhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000 // 单步运动停止的时间(默认值1000ms)}},},}<style lang="less" scoped>.tableItem{overflow: hidden;.seamless-warp{height: calc(100vw * 140 / 1920);overflow: hidden;}.seamless-borrowwWarp{height: calc(100vw * 100 / 1920);overflow: hidden;}}.table{margin-top: calc(100vw * 10 / 1920);// color: #fff;color: rgb(6,118,231);width: 100%;tr td {font-size: calc(100vw * 12 / 1920);text-align: center;padding: calc(100vw * 6 / 1920) 0;}tr th{color: rgb(6,225,235);font-weight: 500 !important;font-size: calc(100vw * 14 / 1920);padding: calc(100vw * 6 / 1920) 0;}thead{background: rgb(18,34,59) !important;}}
</style>3、效果
vue-seamless-scroll 插件实现列表无缝滚动