若实现无缝滚动,可参考https://blog.csdn.net/weixin_38345306/article/details/119917668
:class="{anim: animation}"是实现滚动部分的重要代码
template中的内容
<div class="chart-part-2">
<ul class="ulList" :class="{anim: animation}">
<li v-for="item in riskList" :key="index">
<img src="@img/screen2/subtitle_tag.png">
<span>{{item.name}}</span>
</li>
</ul>
</div>
script节点中的内容
data(){
animation:false,
riskList:[
{name:"haha1"},
{name:"haha2"},
{name:"haha3"},
]
}
created(){
if(this.riskList.length>1){
const time=setInterval(this.showMarquee,2000)
}
}
methods(){
showMarquee(){
this.animation=true,
setTimeout(()=>{
this.riskList.push(this.riskList[0]);
this.riskList.shift();
this.animation=false;
},340)
this.$once('hook:beforeDestory',()=>{
clearInterval(time)
})
},
}
style中的内容
.chart-part-2{
display: flex;
font-size: 0.8rem;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
align-items: center;
//justify-content: center;
overflow: hidden;/**超出部分隐藏 */
text-overflow: ellipsis;//单行文本超出部分用省略号
white-space: nowrap;//强制不换行
width: 100%;
img{
width: 1vh;
height: 1vh;
margin: 0 1vh;
}
}
.ulList{
list-style: none;
line-height: 4vh;
li{
width: 90%;
overflow: hidden;/**超出部分隐藏 */
white-space: nowrap;//强制不换行
text-overflow: ellipsis;//文本超出部分用省略号
}
}
.anim{
transition: all 0.5s ease-out;//实现滚动效果
margin-top:-30px
}