console
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;
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';
},16)
}
},
mounted() {
this.scroll()
}
})
<div id="app">
<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>
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;
}