前言
最近项目有个需求是做一个垂直滚动的公告，其中也涉及到了设置定时器和清除定时器方面的知识点，在这里记录下过程，不对的地方欢迎大家指正，一起共同进步！
思路
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);可以看出确实会返回一个整数，他代表是第几个定时器
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
