vue實現公告欄文字上下滾動效果

語言: CN / TW / HK

程式碼實現:

  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操作時,時間大於延遲時間