vue 实现无缝向左滚动 鼠标悬停、离开时停止、开始滚动

用的引用vue文件方式写的，可以改成组件代码

html代码：

<div class="cont">
	<div class="contlist" ref='contlist' @mouseover="stopScroll" @mouseout="startScroll">
		<ul>
			<li v-for="(item, index) in list" :key="index">
				{{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }}
			</li>
		</ul>
		<ul>
			<li v-for="(item, index) in list" :key="index">
				{{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }}
			</li>
		</ul>
	</div>
</div>

js 代码：

<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			list: [
				{name: '负限位报警', time: '2019-12-18 16:20:34'},
				{name: '水位报警', time: '2019-12-18 16:20:34'},
				{name: '正限位报警', time: '2019-12-18 16:20:34'},
				{name: '温度报警', time: '2019-12-18 16:20:34'},
				{name: '回架报警', time: '2019-12-18 16:20:34'},
			],
			scrollW: 0, //记录滚动到哪了
		},
		methods: {
			//鼠标悬停，停止滚动
			stopScroll () {
				var target = this.$refs.contlist;
				clearInterval(this.scrollTime)
			},
			//鼠标移开 ，接着滚动
			startScroll () {
				var target = this.$refs.contlist;
				this.scrollW = target.offsetLeft; // 移开时记录向左移动的距离
				this.scroll()
			},
			//循环滚动
			scroll (){
				var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
				var target = this.$refs.contlist; 
				var initLeft = 0;
				if(this.scrollW < 0){
					initLeft = this.scrollW * (-1)
				}
				//定时器
				this.scrollTime = setInterval(function(){
				    initLeft ++;
				    if(initLeft >= target.offsetWidth / 2 ){
				        initLeft = 0;
				    }
					target.style.left = '-'+ initLeft +'px';//获取不到translateX的值改用 left
					
					//target.style = 'transform: translateX(-'+ initLeft +'px)';
				},16)
			}
		},
		mounted() {
			//实例挂载完毕前
			//调用滚动代码
			this.scroll()
		}
	})
</script>

css 代码：

<style type="text/css">
	ul,li,em{
		margin:0;
		padding: 0;
	}
	.cont{
		height: 20px;
		background-color:#000;
		color: #fff;
		overflow: hidden;
		position: relative;
	}
	.contlist{
		position: absolute;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
	}
	.contlist ul{
		display: flex;
		flex-direction: row;
	}
	.contlist ul li{
		font-size: 12px;
		margin-right: 25px;
		height: 20px;
		line-height: 20px;
		display: flex;
		flex-direction: row;
	}
	.contlist ul li em{
		color:#f80;
		font-size: 12px;
		padding-right: 10px;
	}
</style>

本文转载于：https://blog.csdn.net/Amandaandjack861007/article/details/103618548