vue实现通知消息上下滚动效果
1,html
<!-- 通知消息滚动模板 -->
<div class="box">
<ul class="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in messageList'><img style="height: 0.267rem" :src='require("assets/img/self/hd.png")' >{{item.infoContent.substring(0,20)+'...'}}<span style="color: #999999;font-size: 0.053rem;float: right;margin-right: 0.18rem">{{item.createTime | dateYMD }}</span></li>
</ul>
</div>
2,CSS
.box{
width: 98%;
height: 64px;
overflow: hidden;
margin-left: 1.5%;
margin-top: 0.533rem;
background: #f9f9f9;
border-radius: 0.213rem;
}
.anim{
transition: all 0.5s;
margin-top: -30px;
}
.con1 li{
list-style: none;
line-height: 30px;
height: 30px;
font-size: 0.053rem;
}
3,JS
created() {
// 定时触发滚动函数
setInterval(this.messagescroll,2000)
},
methods:{
//通知消息滚动函数
messagescroll(){
this.animate=true; // 开启过渡动画
setTimeout(()=>{
this.messageList.push(this.messageList[0]); // 将数组的第一个元素追加到数组最后面
this.messageList.shift(); //然后删除数组的第一个元素
this.animate=false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动
},3500)
},
}
data() {
return {
animate:false, //控制过渡动画是否开启
messageList:[],//通知消息列表
}
}
4,实现效果