在项目中经常会遇到了大屏滚动的问题，那么一起看下如何实现吧，
vue-seamless-scroll 是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
官方文档：06 - 单步停顿 | vue-seamless-scroll
记录下我的业务场景是动态的table表格，表头和内容数据都是后端接口返回，超出指定行例如10条数据后就滚动展示（行数可配置）。为了解决表头会跟着一起滚动，所以表格要拆成2个，一个是展示表头把table内筒主体隐藏，一个是展示表格主体内容表头隐藏（且用vue-seamless-scroll包住即可），这里一定要注意下，话不多说直接上代码
第一步安装：
npm install vue-seamless-scroll --saveyarn add vue-seamless-scroll第二步使用：
1）页面结构
<div class="scroll_table">
<el-table
:data="tableData"
fit
class="table"
:row-class-name="tableRowClassName"
:header-row-class-name="tableRowClassName"
border
>
<el-table-column
v-for="(item,index) in tableColumn"
:key="index+'i'"
align="center"
:label="item.propName"
:prop="item.prop"
/>
</el-table>
<div class="scroll-container" @touchmove.prevent>
<vue-seamless-scroll
:data="tableData"
class="seamless-warp"
style="width: 100%"
:class-option="classOption"
:delay="5000"
>
<el-table
:data="tableData"
class="table_scroll"
v-loading="loading"
fit
:row-class-name="tableRowClassName"
:header-row-class-name="tableRowClassName"
ref="scrollTable"
border
>
<el-table-column
:label="item.propName"
:property="item.prop"
v-for="item in tableColumn"
:key="item.prop"
align="center"
:show-overflow-tooltip="true"
>
<template #default="scope">
<template v-if='scope.column.property == "room"'>
<span class="blod-text">{{ scope.row.room }}</span><br/>
<span>({{ scope.row.doctorName }})</span>
</template>
<template v-else-if='scope.column.property == "waitList"'>
<marquee :scrollamount="2" scrolldelay="90" v-if="scope.row.waitList.length > 3">
<span class="name-con" v-for="(pre,index) in scope.row.waitList" :key="index">{{ pre }}</span>
</marquee>
<p v-else>
<span class="name-con" v-for="(pre,index) in scope.row.waitList" :key="index">{{ pre }}</span>
</p>
</template>
<template v-else-if='scope.column.property == "number"'>
<span class="blod-text">{{ scope.row.number }} 人</span>
</template>
<template v-else>
<span class="blod-text">{{ scope.row[scope.column.property] }}</span>
</template>
</template>
</el-table-column>
</el-table>
</vue-seamless-scroll>
</div>
</div>import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: 'Screen',
components: {
vueSeamlessScroll,
},
data() {
return {
tableColumn:[],//表格表头数据
tableData:[],//表格数据列表
scrollHeigth:'',//每次滚动的高度-table的可视区
}
},
computed: {
classOption () {//大屏滚动配置参数
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: this.scrollHeigth, //单步运动停止的高度(默认值0是无缝不停止的滚动) 一行的高度
waitTime: 10000 // 单步运动停止的时间(默认值1000ms)
}
},
},
mounted(){
this.$nextTick(()=>{
const table = this.$refs.scrollTable
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper
this.scrollHeigth = divData.clientHeight
this.getList() //根据自己需要改成接口返回的数据即可
})
},
methods: {
// 表单样式
tableRowClassName(){
return 'blue'
},
// 获取客户列表数据
async getList() {
//表头
this.tableColumn = [
{
propName:'诊室+医生',
property:'room',
prop:'room',
},
{
propName:'当前就诊',
property:'currentVisit',
prop:'currentVisit'
},
{
propName:'下一位',
property:'nextOne',
prop:'nextOne',
},
{
propName:'等待就诊',
property:'waitList',
prop:'waitList'
},
{
propName:'等待人数',
property:'number',
prop:'number',
}
]
//表格内容
this.tableData = [
{
room: '2诊室',
doctorName:'陆琴',
currentVisit: '陆云',
nextOne: '张伟',
waitList: ['华晨新','张韵芸','王越楠'],
number:8,
},
{
room: '1诊室',
doctorName:'张玉香',
currentVisit: '二狗',
nextOne: '三宝',
waitList: ['张三','张韵芸','沈韵明'],
number:4,
},
{
room: '3诊室',
doctorName:'张玉香',
currentVisit: '二狗',
nextOne: '三宝',
waitList: ['张三','张韵芸','沈韵明'],
number:4,
},
{
room: '4诊室',
doctorName:'陆琴',
currentVisit: '陆云',
nextOne: '张伟',
waitList: ['张韵芸','李芸萨','顾明磊','张韵芸'],
number:8,
},
{
room: '5诊室',
doctorName:'张玉香',
currentVisit: '二狗',
nextOne: '三宝',
waitList: ['张三','张韵芸','沈韵明'],
number:4,
},
{
room: '6诊室',
doctorName:'陆琴',
currentVisit: '陆云',
nextOne: '张伟',
waitList: ['李芸萨','顾明磊','华晨新'],
number:8,
},
{
room: '7诊室',
doctorName:'张玉香',
currentVisit: '二狗',
nextOne: '三宝',
waitList: ['张韵芸'],
number:4,
},
{
room: '8诊室',
doctorName:'陆琴',
currentVisit: '陆云',
nextOne: '张伟',
waitList: ['华晨新','王越楠'],
number:8,
}
];
},
}
}<style>
/* 去掉表单背景色 */
.el-table,.el-table th{
background: transparent !important;
color: #FFF;
}
.el-table .blue{
background: transparent !important;
}
/* 数据的第一条高亮 */
.el-table tbody .blue:first-child{
color: rgb(245, 200, 144);
background: transparent !important;
font-weight: 700;
}
/* 点击不变色 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent !important;
}
.table .el-table__header-wrapper {
display: block !important;
}
.table .el-table__body-wrapper {
display: none !important;
}
/* 重点注意这段样式 */
.seamless-warp {
height: calc(100vh - 72px);
overflow: hidden;
}
.table_scroll .el-table__header-wrapper {
display: none !important;
}
.scroll_table {
height: calc(100vh - 50px);
overflow: hidden;
}
</style>注意：
1）classOption 就是配置滚动的参数的，不懂的话，可以看下vue-seamless-scroll官方文档哈
2）this.getList() //我这里是先写的假数据，后期根据自己需要改成接口返回的数据即可
3）样式根据自己需要去修改，很多table样式需要覆盖，还没好好整理，不要学我，你认真整理下哈
结语：动态表格需要注意下配置，如果不是接口返回的动态表格，就不需要像我这么麻烦，直接用<vue-seamless-scroll></vue-seamless-scroll>包裹table即可
希望文章对你有所帮助，看到这里也感谢你宝贵的时间，拜拜
