前言
最近项目有个需求是做一个垂直滚动的公告，其中也涉及到了设置定时器和清除定时器方面的知识点，在这里记录下过程，不对的地方欢迎大家指正，一起共同进步！
思路
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);可以看出确实会返回一个整数，他代表是第几个定时器
