<div class="marquee-wrap">
<ul class="marquee-list" :class="{'animate-up': animateUp}">
<li v-for="(item, index) in listData" :key="index">{{item.name}}</li>
</ul>
</div>
Ts
animateUp = false
listData = [
{
name:'120件/行政案件',
type:0,
},
{
name:'150件/民事案件',
type:1,
},
{
name:'110件/刑事案件',
type:2,
},
{
name:'100件/行政案件',
type:2,
},
{
name:'100件/行政案件',
type:0,
},
{
name:'100件/行政案件',
type:1,
},
{
name:'100件/行政案件',
type:0,
},
]
timer = null
mounted() {
this.timer = setInterval(this.scrollAnimate, 2000);
}
scrollAnimate() {
this.animateUp = true
setTimeout(() => {
this.listData.push(this.listData[0])
this.listData.shift()
this.animateUp = false
}, 500)
}
destroyed() {
clearInterval(this.timer)
}
scss 此 css 为三条滚动 修改条数 自行修改 .marquee-wrap 高度
.marquee-wrap {
height: 120px;
margin: 0;
overflow: hidden;
.marquee-list {
margin: 0; padding: 0;
li {
padding-left: 23px;
box-sizing: border-box;
width: 100%;
height: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
list-style: none;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: 400;
}
}
.animate-up {
transition: all 0.5s ease-in-out;
transform: translateY(-40px);
}
}