vue 消息通知滚动条
时间: 2023-11-08 16:00:26 浏览: 76
Vue消息通知滚动条是通过使用定时器和数组操作来实现的。首先,在data属性中定义了一个名为animate的变量和一个名为messageList的数组,用来控制过渡动画和存储通知消息。然后,在created方法中使用setInterval函数设定了一个定时触发滚动函数messagescroll。messagescroll函数中,将数组的第一个元素追加到数组最后面,并删除数组的第一个元素,实现消息的滚动效果。在滚动过程中,通过设置animate变量来开启和关闭过渡动画。最后,在模板中使用v-for指令遍历messageList数组,实现消息的展示。
代码示例:
```
<template>
<div>
<ul id="con1" ref="con1" :class="{anim:animate==true}" style="margin:0">
<li v-for='item in messageList' :key="item.id">{{item.content}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
animate:false,
messageList:[]
};
},
created() {
setInterval(this.messagescroll, 2000);
},
methods: {
messagescroll() {
this.animate = true;
setTimeout(() => {
this.messageList.push(this.messageList[0]);
this.messageList.shift();
this.animate = false;
}, 3500);
}
}
};
</script>
<style scoped>
.anim {
transition: all 0.5s;
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)