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.tableList
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)
}
},
},
}
<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 插件实现列表无缝滚动