npm install vue-seamless-scroll --save

yarn add vue-seamless-scroll

// 全局注冊
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})
 
 
// 局部注冊
import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }
 
 
// 使用
<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </div>

<div  @click="handleButton($event)">

<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>

// 處理鼠標(biāo)點(diǎn)擊到哪條，可添加跳轉(zhuǎn)
			handleButton(e) {
				// let InfoAnync = JSON.parse(e.target.dataset.obj)
				// console.log(InfoAnync,' =====> InfoAnync')
				console.log(e, ' =====> e')
				console.log(e.path, ' =====> e.path')
				let length = e.path.length
				let labelIndex = -1
				for(let i=0;i < length; i++){
					if(e.path[i].className === 'labelIndex'){
						labelIndex = i;
						break
					}
				}
				if(labelIndex !== -1){
					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title： ' + this.listData[e.path[labelIndex].id].title)
				}else{
					alert('未找到數(shù)據(jù)，請檢查')
				}
				
			}

<template>
	<div class="wrap-container sn-container">
		<div class="sn-content">
			<div class="sn-title">消息自動(dòng)滾動(dòng)播放</div>
			<div class="sn-body">
				<div class="wrap-container">
					<div class="table">
						<table border="0" cellpadding='0' cellspacing='0' class="table-header">
							<tbody>
								<tr>
									<td width='60%'>
										<span>標(biāo) 題</span>
									</td>
									<td width='20%'>
										<span>日 期</span>
									</td>
									<td width='20%'>
										<span>熱 度</span>
									</td>
								</tr>
							</tbody>
						</table>
						<div  @click="handleButton($event)">
							<vue-seamless-scroll :data='listData' class="seamless-warp" :class-option="optionSetting">
								<table border='0' cellpadding='0' cellspacing='0' class='item'>
									<tbody>
										<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>										
											<td width='100%' class="title">
												<span>{{item.title}}</span>
											</td>
											<td width='20%'>
												<span>{{item.date}}</span>
											</td>
											<td width='20%'>
												// 顯示熱度，且根據(jù)不同數(shù)值，顯示不同顏色
												<span
													:class="{colorRed: item.hot > 2555,colorOrange: item.hot < 10}"
													>{{item.hot}}</span>
											</td>
										</tr>
									</tbody>
								</table>
							</vue-seamless-scroll>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'seamless-scroll',
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				// 數(shù)據(jù)
				listData: [{
					title: '錢花哪了?一圖帶你讀懂年輕人的消費(fèi)觀',
					date: '2020-05-05',
					hot: 2306
				}, {
					title: '“五一”假期前三天國內(nèi)旅游收入超350億元',
					date: '2020-05-02',
					hot: 5689
				}, {
					title: '滴滴、美團(tuán)、哈啰交戰(zhàn)，本地生活會(huì)是終局？',
					date: '2020-05-02',
					hot: 9
				}, {
					title: '“互聯(lián)網(wǎng)+文化”逆勢上行文娛消費(fèi)云端真精彩',
					date: '2020-04-25',
					hot: 288
				}, {
					title: '樂觀還是悲觀？巴菲特是個(gè)現(xiàn)實(shí)主義者！',
					date: '2020-04-21',
					hot: 158
				}, {
					title: 'B站的后浪，會(huì)把愛優(yōu)騰拍在沙灘上嗎?',
					date: '2020-04-20',
					hot: 889
				}, {
					title: '華為如何做投資的：先給兩億訂單一年上市',
					date: '2020-04-01',
					hot: 5800
				}, {
					title: '馬斯克：特斯拉股價(jià)太高了，我要賣豪宅',
					date: '2020-03-25',
					hot: 6
				}, {
					title: '人民日報(bào)海外版：云模式巧解“就業(yè)難”',
					date: '2020-03-16',
					hot: 88
				}, {
					title: '剛剛港股"崩了"：狂跌近1000點(diǎn)！',
					date: '2020-03-12',
					hot: 88
				}, {
					title: '個(gè)人健康信息碼國家標(biāo)準(zhǔn)發(fā)布',
					date: '2020-02-28',
					hot: 5
				}, {
					title: '傳軟銀國際裁員約10%兩名管理合伙人離職',
					date: '2020-02-15',
					hot: 258
				}, {
					title: '27萬個(gè)崗位：區(qū)塊鏈、人工智能等專場招聘',
					date: '2020-02-10',
					hot: 198
				}, {
					title: '一季度電商發(fā)展勢頭迅猛農(nóng)村電商破1300萬家',
					date: '2020-02-08',
					hot: 19
				}]
			}
		},
		
		computed:{
			optionSetting(){
				return{
					step: 0.5, // 數(shù)值越大速度滾動(dòng)越快
					limitMoveNum: 2, // 開始無縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length
					hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					autoPlay: true, // 是否自動(dòng)滾動(dòng)
					openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
					singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1
					singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
					waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
				}
			}
		},
		methods:{
			// 處理鼠標(biāo)點(diǎn)擊到哪條，可添加跳轉(zhuǎn)
			handleButton(e) {
				// let InfoAnync = JSON.parse(e.target.dataset.obj)
				// console.log(InfoAnync,' =====> InfoAnync')
				console.log(e, ' =====> e')
				console.log(e.path, ' =====> e.path')
				let length = e.path.length
				let labelIndex = -1
				for(let i=0;i < length; i++){
					if(e.path[i].className === 'labelIndex'){
						labelIndex = i;
						break
					}
				}
				if(labelIndex !== -1){
					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title： ' + this.listData[e.path[labelIndex].id].title)
				}else{
					alert('未找到數(shù)據(jù)，請檢查')
				}
				
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.sn-title{
		text-align: center;
	}
	.sn-container{
		position: absolute;
		left: 30%;
		width: 600px;
		height: 800px;
		%table-style{
			width: 100%;
			height: 35px;
			table-layout: fixed;
			tr {
				td {
					padding: 10px 5px;
					text-align: center;
					background-color: transparent;
					white-space: nowrap;
					overflow: hidden;
					color: #e200ff;
					font-size: 14px;
				}
			}
		}
		.table{
			.table-header{
				@extend %table-style;
			}
			
			.seamless-warp{
				height: 400px;
				overflow: hidden;
				visibility: visible;
				.colorRed {
					color: #FF4669;
				}
				.colorOrange {
					color: #FFC956;
				}
				.item{
					height: auto;
					@extend %table-style;
					tr{
						td{
							&.title{
								text-overflow: ellipsis;
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}
</style>

     <vue-seamless-scroll
        :data="threeList"
        class="warp"
        :class-option="defaultOption"
        ref="scroll3"
      >