vue-seamless-scroll 踩坑记录

需求是做一个无缝滚动的效果

该插件它本身就是当数据为一条时，不发生滚动。
我们要实现的效果是，当已有数据在列表中显示的高度与滚动窗口比较大小，大于滚动窗口高度则滚动小于则不滚动
发现该插件会自动拼接一个复制的列表
所以直接使用内容高度跟窗口高度比较的话是错的

<template>
	<div>
		<vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="defaultOption" :key="seamlessScrollKey">
		  <div class="tbodyTr" v-for="item in tableData" :key="item.id">
		    <div style="width: calc(100% - 1050px)">{{item.name}}</div>
		    <div style="width: 250px;text-align: center;"><span class="span">{{item.plan_startdate_char}}</span> - <span class="span">{{item.plan_enddate_char}}</span></div>
		    <div style="width: 100px;text-align: center;">{{item.train_place1}}</div>
		    <div style="width: 400px;">{{item.org_name}}</div>
		    <div style="width: 200px;text-align: center;justify-content: center;">{{item.empname}}/{{item.mobile}}</div>
		  </div>
		</vue-seamless-scroll>
	</div>
</template>
<script>
export default{
	data{
		return {
			seamlessScrollKey: 0,
			tableData: [
		        {id: 1, name: '邮件审批测试0922_wdk_公告---1', plan_startdate_char: '2021-09-27', plan_enddate_char: '2021-10-27', train_place1: '深圳基地', org_name: '总行/人力资源部/培训中心/其他外包',empname: '刘海波', mobile: '19987654321'},
		        {id: 2, name: '邮件审批测试0922_wdk_公告---2', plan_startdate_char: '2021-09-27', plan_enddate_char: '2021-10-27', train_place1: '深圳基地', org_name: '总行/人力资源部/培训中心/其他外包',empname: '刘海波', mobile: '19987654321'},
		        {id: 3, name: '邮件审批测试0922_wdk_公告---3', plan_startdate_char: '2021-09-27', plan_enddate_char: '2021-10-27', train_place1: '深圳基地', org_name: '总行/人力资源部/培训中心/其他外包',empname: '刘海波', mobile: '19987654321'},
		        {id: 4, name: '邮件审批测试0922_wdk_公告---4', plan_startdate_char: '2021-09-27', plan_enddate_char: '2021-10-27', train_place1: '深圳基地', org_name: '总行/人力资源部/培训中心/其他外包',empname: '刘海波', mobile: '19987654321'},
		        {id: 5, name: '邮件审批测试0922_wdk_公告---5', plan_startdate_char: '2021-09-27', plan_enddate_char: '2021-10-27', train_place1: '深圳基地', org_name: '总行/人力资源部/培训中心/其他外包',empname: '刘海波', mobile: '19987654321'},
		      ],
		}
	},
	computed: {
		defaultOption () {
			return {
				step: 0, // 数值越大速度滚动越快，为0时不发生滚动，大于0发生滚动
				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)
			}
		},
	},
	mounted() {
		this.$nextTick(()=>{
			if(document.getElementsByClassName('seamless-warp')[0].firstElementChild.firstElementChild.clientHeight > 窗口高度) { 
				// 内容超出
				this.defaultOption.step = 1; // 修改数据让元素开始滚动
				this.seamlessScrollKey = 0; // 修改key值让组件重新渲染
			}else{ 
				// 内容不超出时隐藏复制出来的那个列表
				document.getElementsByClassName('seamless-warp')[0].firstElementChild.lastElementChild.style.display = 'none';
			}
		})
	}
}
</script>

据说vue-seamless-scroll有那个暂停滚动和开始滚动的事件，我看了下文档没找到。。。先记着吧