vue通过定时器实现垂直滚动公告

Jacinda ·

更新时间:2024-09-20

· 1273 次阅读

前言

最近项目有个需求是做一个垂直滚动的公告，其中也涉及到了设置定时器和清除定时器方面的知识点，在这里记录下过程，不对的地方欢迎大家指正，一起共同进步！

思路

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);可以看出确实会返回一个整数，他代表是第几个定时器