阅读 6736

vue实现公告栏文字上下滚动效果

代码实现:

  1. 在项目结构的components中新建text-scroll.vue文件
<template>
    <div class="text-container">
        <transition class="" name="slide" mode="out-in">
            <p class="text" :key="text.id">{{text.val}}</p>
        </transition>
    </div>
</template>

<script>

export default {
  name: 'TextScroll',
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      count: 0, // 当前索引
      intervalId: null, // 定时器ID
      playTime: 2000, // 定时器执行间隔
    };
  },
  computed: {
    text() {
      return {
        id: this.count,
        val: this.dataList[this.count],
      };
    },
  },
  created() {
    this.intervalId = setInterval(() => { // 定义定时器
      this.getText();
    }, this.playTime);
  },
  methods: {
    getText() {
      const len = this.dataList.length; // 获取数组长度
      if (len === 0) {
        return; // 当数组为空时,直接返回
      }
      if (this.count === len - 1) { // 当前为最后一个时
        this.count = 0; // 从第一个开始
      } else {
        this.count++; // 自增
      }
    },
  },
  destroyed() {
    clearInterval(this.intervalId); // 清除定时器
  },
};
</script>

<style scoped>
.text-container{
    font-size: 14px;
    color: #F56B6B;
    margin-right: 20px;
    height: 60px;
}

.text {
    text-align: right;
    margin: auto 0;
}

.slide-enter-active, .slide-leave-active {
    transition: all 1s;
}

.slide-enter{
    transform: translateY(40px);
}

.slide-leave-to {
    transform: translateY(-40px);
}
</style>
复制代码
  1. 在header-bar组件使用
<text-scroll :dataList="noticeList"></text-scroll>
复制代码

分析

transition标签

这里是动态组件

官方文档: cn.vuejs.org/v2/guide/tr…

为什么用setInterval,而不是setTimeout

setInterval是循环执行,setTimeout是延迟执行。我们这里要的是setTimeout循环执行。通过嵌套setTimeout可以实现循环,但是每次都会注册一个计时器,然后时间上也是需要等当前setTimeout执行完再延迟比如说两秒执行,实际上就不只2s。

什么情况下setTimeout嵌套可以解决 setInterval 解决不了的问题 当计时器是高耗时的计算或者dom操作时,时间大于延迟时间

文章分类
前端
文章标签