vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

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'>

// 处理鼠标点击到哪条，可添加跳转
			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('未找到数据，请检查')
				}
				
			}

<template>
	<div class="wrap-container sn-container">
		<div class="sn-content">
			<div class="sn-title">消息自动滚动播放</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>标 题</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%'>
												// 显示热度，且根据不同数值，显示不同颜色
												<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 {
				// 数据
				listData: [{
					title: '钱花哪了?一图带你读懂年轻人的消费观',
					date: '2020-05-05',
					hot: 2306
				}, {
					title: '“五一”假期前三天国内旅游收入超350亿元',
					date: '2020-05-02',
					hot: 5689
				}, {
					title: '滴滴、美团、哈啰交战，本地生活会是终局？',
					date: '2020-05-02',
					hot: 9
				}, {
					title: '“互联网+文化”逆势上行文娱消费云端真精彩',
					date: '2020-04-25',
					hot: 288
				}, {
					title: '乐观还是悲观？巴菲特是个现实主义者！',
					date: '2020-04-21',
					hot: 158
				}, {
					title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
					date: '2020-04-20',
					hot: 889
				}, {
					title: '华为如何做投资的：先给两亿订单一年上市',
					date: '2020-04-01',
					hot: 5800
				}, {
					title: '马斯克：特斯拉股价太高了，我要卖豪宅',
					date: '2020-03-25',
					hot: 6
				}, {
					title: '人民日报海外版：云模式巧解“就业难”',
					date: '2020-03-16',
					hot: 88
				}, {
					title: '刚刚港股"崩了"：狂跌近1000点！',
					date: '2020-03-12',
					hot: 88
				}, {
					title: '个人健康信息码国家标准发布',
					date: '2020-02-28',
					hot: 5
				}, {
					title: '传软银国际裁员约10%两名管理合伙人离职',
					date: '2020-02-15',
					hot: 258
				}, {
					title: '27万个岗位：区块链、人工智能等专场招聘',
					date: '2020-02-10',
					hot: 198
				}, {
					title: '一季度电商发展势头迅猛农村电商破1300万家',
					date: '2020-02-08',
					hot: 19
				}]
			}
		},
		
		computed:{
			optionSetting(){
				return{
					step: 0.5, // 数值越大速度滚动越快
					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: true, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					autoPlay: true, // 是否自动滚动
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
				}
			}
		},
		methods:{
			// 处理鼠标点击到哪条，可添加跳转
			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('未找到数据，请检查')
				}
				
			}
		}
	}
</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"
      >