vue通过定时器实现垂直滚动公告
作者:铁锤妹妹@
这篇文章主要为大家详细介绍了vue通过定时器实现垂直滚动公告,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前言
最近项目有个需求是做一个垂直滚动的公告,其中也涉及到了设置定时器和清除定时器方面的知识点,在这里记录下过程,不对的地方欢迎大家指正,一起共同进步!
思路
1. 写好样式,把滚动的内容循环出来,固定显示区域的高度,超出隐藏
2. 设置定时器,将第一条数据塞到最后一个,删除第一条数据,暂停播放
3. 在mounted中创建并执行定时器
4. destroyed中清除定时器
HTML部分
<div class="roll"> <div class="roll-line" /> <i class="el-icon-bell"></i> <ul class="list"> <li v-for="(item, index) in ulList" :key="item.id" :class="!index && play ? 'toUp' : ''" > {{ item.msg }} </li> </ul> </div>
JS部分
export default { data() { return { ulList: [ { msg: "这是第一条信息这是第一条信息这是第一条信息这是第一条信息" }, { msg: "这是第二条信息这是第二条信息这是第二条信息这是第二条信息" }, { msg: "这是第三条信息这是第三条信息这是第三条信息这是第三条信息" }, { msg: "这是第四条信息这是第四条信息这是第四条信息这是第四条信息" }, { msg: "这是第五条信息这是第五条信息这是第五条信息这是第五条信息" } ], play: false, timer: null, // //接收定时器 }; }, mounted() { //页面挂载完成时就开始定时器,公告文字滚动 setInterval(this.startPlay, 4000); console.log('开始定时器'); }, destroyed() { // 页面销毁时清除定时器 clearInterval(this.timer); console.log('销毁定时器'); }, methods: { startPlay() { let that = this; that.play = true; //开始播放 that.timer = setTimeout(() => { //创建并执行定时器 that.ulList.push(that.ulList[0]); //将第一条数据塞到最后一个 that.ulList.shift(); //删除第一条数据 that.play = false; //暂停播放 }, 500); console.log(that.timer); }, } };
css样式
<style lang="scss" scoped> .roll { width: 100%; height: 60px; /*关键样式*/ line-height: 60px; /*关键样式*/ background: #fff; margin-bottom: 24px; box-shadow: 4px 0 10px rgba(226, 226, 226, 0.3); padding: 0 20px; color: #f5212d; font-size: 14px; display: flex; .roll-line { width: 2px; height: 100%; background: #dee2e6; margin: 0 20px 0 -20px; } .el-icon-bell { color: #343a40; line-height: 60px; /*关键样式*/ margin-right: 10px; } .toUp { margin-top: -60px; /*关键样式*/ transition: all 1s; /*关键样式*/ } .list { list-style: none; width: 100%; text-align: center; overflow: hidden; /*关键样式*/ height: 60px; /*关键样式*/ padding: 0; margin: 0; } li { text-align: left; height: 60px; /*关键样式*/ line-height: 60px; /*关键样式*/ } } </style>
关于定时器的清除
由于定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,所以定时器的清除要借助于这个返回的数字。
定时器清除的方法:clearTimeout(obj)和clearInterval(obj)。(注意定时器的清除方法)
通过打印console.log(that.timer);
可以看出确实会返回一个整数,他代表是第几个定时器
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。