用的引用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: '-12-18 16:20:34'},{name: '水位报警', time: '-12-18 16:20:34'},{name: '正限位报警', time: '-12-18 16:20:34'},{name: '温度报警', time: '-12-18 16:20:34'},{name: '回架报警', time: '-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>
初学Vue研究这个好久了，后续各种上下左右运行都写一个，以及幻灯片
