vue 消息滚动通知栏
从下往上跑1<div class="news flex-bet"><div class="img flex-bet"><img class="nioce" src="../assets/images/home03.png" /><img class="icon" src="../assets/images/home04.png" /&...
·
从下往上跑
1
<div class="news flex-bet">
<div class="img flex-bet">
<img class="nioce" src="../assets/images/home03.png" />
<img class="icon" src="../assets/images/home04.png" />
</div>
<div class="news-cot">
<ul :class="{marquee_top:animate}">
<li class="h" v-for="(item,index) in news">{{item.name}}</li>
</ul>
</div>
</div>
2
export default {
name: "Home",
data() {
return{
animate: false,
news: [
{
name: '对接口白色的可看出'
},{
name: '就的女会计师你开饭店'
},{
name: '机不可失打开的方式'
},{
name: '接口部分都看见你发靠的就是南方'
},{
name: '开办费离开你浪费'
},{
name: '举报你放假你发个技能奉公守法'
}
]
}
},
methods: {
showMarquee: function() {
this.animate = true;
setTimeout(() => {
this.news.push(this.news[0]);
this.news.shift();
this.animate = false;
}, 500);
}
}
}
3
.marquee_top {transition: all 0.5s;margin-top: -45px;}
更多推荐
已为社区贡献8条内容
所有评论(0)