本文详细介绍了一种使用Vue.js实现的新闻跑马灯效果，包括HTML结构、JavaScript逻辑及CSS样式。通过v-if和v-for指令动态显示新闻标题，并利用setTimeout实现滚动效果。
html:
<div class="news" v-if="news.length > 0" >
<ul class="marquee_list" :class="{ marquee_top : animate }">
<li v-for="item in news">{{item.title}}</li>
</ul>
</div>
js:
export default {
data(){
return {
news:[],
animate:false
}
},
mounted(){
this.showMarquee();
},
methods:{
showMarquee: function () {
this.animate = true;
setTimeout(()=>{
this.news.push(this.news[0]);
this.news.shift();
this.animate = false;
},500)
}
}
}
CSS:
.news {
position: relative;
overflow: hidden;
padding: 0.1rem .3rem;
height: .84rem;
box-sizing: border-box;
">#fff;
&::before{
content: "";
width: .74rem;
height: .64rem;
display: block;
overflow: hidden;
background-image: url("../images/new_icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
}
ul{
padding-left: 1.24rem;
box-sizing: border-box;
width: 100%;
li{
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
height: .64rem;
line-height: .64rem;
font-size: .3rem;
display: block;
overflow: hidden;
padding: .1rem;
}
}
}
.marquee_list{
position: absolute;
top:0px;
left: 0px;
}
.marquee_top {
transition: all 0.5s;
margin-top: -.84rem
}
扫一扫
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
